react-native-navigation的迁移库

ModalScreen.js 1.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import React, {
  2. Component,
  3. Text,
  4. View,
  5. ScrollView,
  6. TouchableOpacity,
  7. StyleSheet
  8. } from 'react-native';
  9. export default class ModalScreen extends Component {
  10. static navigatorButtons = {
  11. leftButtons: [{
  12. title: 'Close',
  13. id: 'close'
  14. }]
  15. };
  16. constructor(props) {
  17. super(props);
  18. // if you want to listen on navigator events, set this up
  19. this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  20. }
  21. render() {
  22. return (
  23. <View style={{flex: 1, padding: 20}}>
  24. <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
  25. <Text style={styles.button}>Push Plain Screen</Text>
  26. </TouchableOpacity>
  27. <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
  28. <Text style={styles.button}>Push Styled Screen</Text>
  29. </TouchableOpacity>
  30. <TouchableOpacity onPress={ this.onClosePress.bind(this) }>
  31. <Text style={styles.button}>Close Modal</Text>
  32. </TouchableOpacity>
  33. </View>
  34. );
  35. }
  36. onNavigatorEvent(event) {
  37. if (event.id == 'close') {
  38. this.props.navigator.dismissModal();
  39. }
  40. }
  41. onPushPress() {
  42. this.props.navigator.push({
  43. title: "More",
  44. screen: "example.PushedScreen"
  45. });
  46. }
  47. onPushStyledPress() {
  48. this.props.navigator.push({
  49. title: "More",
  50. screen: "example.StyledScreen"
  51. });
  52. }
  53. onClosePress() {
  54. this.props.navigator.dismissModal();
  55. }
  56. }
  57. const styles = StyleSheet.create({
  58. button: {
  59. textAlign: 'center',
  60. fontSize: 18,
  61. marginBottom: 10,
  62. marginTop:10,
  63. color: 'blue'
  64. }
  65. });