React Native NavigatorIOS

Question

我是ReactNative的新手 我创建了NavigatorEX类，它通常呈现MiladView，但它不会导航到HadiView类。 route或push方法存在什么问题。 此代码由React-Native 0.25和ES6编写。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  NavigatorIOS
} from 'react-native';

class NavigatorEX extends Component {

  render() {
    return (
      <NavigatorIOS
      style={styles.nav}
        titleTextColor="#212121"
        navigationBarHidden={false}
        initialRoute={{
          component: MiladView,
          title: 'Milad',
          rightButtonTitle: 'Go',
          onRightButtonPress: () => {
            this.props.navigator.push({
              component: HadiView,
              title: 'Hadi',
              leftButtonTitle: 'Back',
              onLeftButtonPress: () => this.props.navigator.pop(),
            });
          },
        }}
      />
    );
  }
}

class HadiView extends Component {

  render(){
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hadi
        </Text>
      </View>
    )
  }
}

class MiladView extends Component {

  render(){
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Milad
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#FAFAFA',
  },
  nav: {
    flex: 1,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('NavigatorEX', () => NavigatorEX);

Answer 1

尝试将ref={navigator => this.navigator = navigator}添加到NavigatorIOS，然后this.navigator.push vs this.props.navigator.push

<NavigatorIOS
  ref={navigator => this.navigator = navigator}
  style={styles.nav}
  titleTextColor="#212121"
  navigationBarHidden={false}
  initialRoute={{
    component: MiladView,
    title: 'Milad',
    rightButtonTitle: 'Go',
    onRightButtonPress: () => {
      this.refs.navigator.push({
          component: HadiView,
          title: 'Hadi',
          leftButtonTitle: 'Back',
          onLeftButtonPress: () => this.refs.navigator.pop(),
        });
      },
    }}
  />