react-native-navigation的迁移库

SideMenu.js 2.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import React, {Component, PropTypes} from 'react';
  2. import {
  3. Text,
  4. View,
  5. ScrollView,
  6. TouchableOpacity,
  7. StyleSheet,
  8. Alert
  9. } from 'react-native';
  10. import {connect} from 'react-redux';
  11. import * as counterActions from '../reducers/counter/actions';
  12. import _ from 'lodash';
  13. class SideMenu extends Component {
  14. constructor(props) {
  15. super(props);
  16. // if you want to listen on navigator events, set this up
  17. this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  18. }
  19. onNavigatorEvent(event) {
  20. console.log('SideMenu', 'Unhandled event ' + event.id);
  21. }
  22. render() {
  23. return (
  24. <View style={styles.sideMenu}>
  25. <Text style={styles.title}>Hello from SideMenu</Text>
  26. <TouchableOpacity onPress={ this.onShowModalPress.bind(this) }>
  27. <Text style={styles.button}>Show modal</Text>
  28. </TouchableOpacity>
  29. <TouchableOpacity onPress={ this.onPushScreen.bind(this) }>
  30. <Text style={styles.button}>Push screen</Text>
  31. </TouchableOpacity>
  32. </View>
  33. );
  34. }
  35. onShowModalPress() {
  36. this.props.navigator.showModal({
  37. title: "Modal Screen from SideMenu",
  38. screen: "example.PushedScreen",
  39. passProps: {
  40. str: 'This is a prop passed in \'navigator.showModal()\'!',
  41. obj: {
  42. str: 'This is a prop passed in an object!',
  43. arr: [
  44. {
  45. str: 'This is a prop in an object in an array in an object!'
  46. }
  47. ]
  48. },
  49. num: 1234
  50. }
  51. });
  52. }
  53. onPushScreen() {
  54. this.props.navigator.handleDeepLink({
  55. link: 'tab1/pushScreen/example.PushedScreen'
  56. });
  57. }
  58. }
  59. const styles = StyleSheet.create({
  60. sideMenu: {
  61. flex: 1,
  62. width: 250,
  63. backgroundColor: '#efefef',
  64. padding: 20
  65. },
  66. title: {
  67. textAlign: 'center',
  68. marginBottom: 15
  69. },
  70. button: {
  71. textAlign: 'center',
  72. fontSize: 18,
  73. borderBottomWidth: 1,
  74. borderColor: 'grey',
  75. marginBottom: 10,
  76. marginTop:10,
  77. color: 'black'
  78. }
  79. });
  80. export default connect()(SideMenu);