react-native-navigation的迁移库

ModalScreen.js 1.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import React, {Component} from 'react';
  2. import {
  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. <TouchableOpacity onPress={ this.onCloseAllPress.bind(this) }>
  34. <Text style={styles.button}>Close All Modals</Text>
  35. </TouchableOpacity>
  36. </View>
  37. );
  38. }
  39. onNavigatorEvent(event) {
  40. if (event.id == 'close') {
  41. this.props.navigator.dismissModal();
  42. }
  43. }
  44. onPushPress() {
  45. this.props.navigator.push({
  46. title: "More",
  47. screen: "example.PushedScreen"
  48. });
  49. }
  50. onPushStyledPress() {
  51. this.props.navigator.push({
  52. title: "More",
  53. screen: "example.StyledScreen"
  54. });
  55. }
  56. onClosePress() {
  57. this.props.navigator.dismissModal();
  58. }
  59. onCloseAllPress() {
  60. this.props.navigator.dismissAllModals();
  61. }
  62. }
  63. const styles = StyleSheet.create({
  64. button: {
  65. textAlign: 'center',
  66. fontSize: 18,
  67. marginBottom: 10,
  68. marginTop:10,
  69. color: 'blue'
  70. }
  71. });