react-native-navigation的迁移库

StyledScreen.js 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import React, {Component} from 'react';
  2. import {
  3. Text,
  4. View,
  5. ScrollView,
  6. TouchableOpacity,
  7. Image,
  8. StyleSheet,
  9. AlertIOS
  10. } from 'react-native';
  11. export default class StyledScreen extends Component {
  12. static navigatorStyle = {
  13. drawUnderNavBar: true,
  14. drawUnderTabBar: true,
  15. navBarTranslucent: true
  16. };
  17. static navigatorButtons = {
  18. rightButtons: [{
  19. icon: require('../../img/navicon_edit.png'),
  20. id: 'compose',
  21. testID: 'e2e_is_awesome'
  22. }]
  23. };
  24. constructor(props) {
  25. super(props);
  26. // if you want to listen on navigator events, set this up
  27. this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  28. }
  29. render() {
  30. return (
  31. <ScrollView style={{flex: 1}}>
  32. <Image style={{width: undefined, height: 100}} source={require('../../img/colors.png')} />
  33. <View style={{padding: 20}}>
  34. <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
  35. <Text style={styles.button}>Push Plain Screen</Text>
  36. </TouchableOpacity>
  37. <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
  38. <Text style={styles.button}>Push Styled Screen</Text>
  39. </TouchableOpacity>
  40. <TouchableOpacity onPress={ this.onPopPress.bind(this) }>
  41. <Text style={styles.button}>Pop Screen</Text>
  42. </TouchableOpacity>
  43. </View>
  44. </ScrollView>
  45. );
  46. }
  47. onNavigatorEvent(event) {
  48. if (event.id == 'compose') {
  49. AlertIOS.alert('NavBar', 'Compose button pressed');
  50. }
  51. }
  52. onPushPress() {
  53. this.props.navigator.push({
  54. title: "More",
  55. screen: "example.PushedScreen"
  56. });
  57. }
  58. onPushStyledPress() {
  59. this.props.navigator.push({
  60. title: "More",
  61. screen: "example.StyledScreen"
  62. });
  63. }
  64. onPopPress() {
  65. this.props.navigator.pop();
  66. }
  67. }
  68. const styles = StyleSheet.create({
  69. button: {
  70. textAlign: 'center',
  71. fontSize: 18,
  72. marginBottom: 10,
  73. marginTop:10,
  74. color: 'blue'
  75. }
  76. });