react-native-navigation的迁移库

FirstTabScreen.js 2.1KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import React, {
  2. Component,
  3. Text,
  4. View,
  5. ScrollView,
  6. TouchableOpacity,
  7. StyleSheet,
  8. AlertIOS
  9. } from 'react-native';
  10. export default class FirstTabScreen extends Component {
  11. static navigatorButtons = {
  12. leftButtons: [{
  13. icon: require('../../img/navicon_menu.png'),
  14. id: 'menu'
  15. }],
  16. rightButtons: [
  17. {
  18. title: 'Edit',
  19. id: 'edit'
  20. },
  21. {
  22. icon: require('../../img/navicon_add.png'),
  23. id: 'add'
  24. }
  25. ]
  26. };
  27. constructor(props) {
  28. super(props);
  29. // if you want to listen on navigator events, set this up
  30. this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  31. }
  32. onNavigatorEvent(event) {
  33. if (event.id == 'menu') {
  34. this.props.navigator.toggleDrawer({
  35. side: 'left',
  36. animated: true
  37. });
  38. }
  39. if (event.id == 'edit') {
  40. AlertIOS.alert('NavBar', 'Edit button pressed');
  41. }
  42. if (event.id == 'add') {
  43. AlertIOS.alert('NavBar', 'Add button pressed');
  44. }
  45. }
  46. render() {
  47. return (
  48. <View style={{flex: 1, padding: 20}}>
  49. <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
  50. <Text style={styles.button}>Push Plain Screen</Text>
  51. </TouchableOpacity>
  52. <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
  53. <Text style={styles.button}>Push Styled Screen</Text>
  54. </TouchableOpacity>
  55. <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
  56. <Text style={styles.button}>Show Modal Screen</Text>
  57. </TouchableOpacity>
  58. </View>
  59. );
  60. }
  61. onPushPress() {
  62. this.props.navigator.push({
  63. title: "More",
  64. screen: "example.PushedScreen"
  65. });
  66. }
  67. onPushStyledPress() {
  68. this.props.navigator.push({
  69. title: "Styled",
  70. screen: "example.StyledScreen"
  71. });
  72. }
  73. onModalPress() {
  74. this.props.navigator.showModal({
  75. title: "Modal",
  76. screen: "example.ModalScreen"
  77. });
  78. }
  79. }
  80. const styles = StyleSheet.create({
  81. button: {
  82. textAlign: 'center',
  83. fontSize: 18,
  84. marginBottom: 10,
  85. marginTop:10,
  86. color: 'blue'
  87. }
  88. });