react-native：undefined不是对象（评估'_this.props.navigator.push'）

Question

-----注意我最后的编辑！-----

我刚开始使用react-native，我遇到了导航器问题。

（我用这个例子作为模板：https://github.com/h87kg/NavigatorDemo）

第一个屏幕（Main）工作正常，但是当尝试.push到下一个时它会给我以下错误：

undefined不是对象（评估'_this.props.navigator.push'）

主要：

  render() {
    return (
      <Navigator
        style={styles.container}
        initialRoute={{ name: 'Main' }}
        renderScene={ this.renderScene.bind(this) }
      />
    );
  }

  renderScene = (route, navigator) => {
    if(route.name == 'Main') {
     return (
       <TouchableHighlight onPress={ () => this._navigate() }>
         <Text>GO To View</Text>
       </TouchableHighlight>
     );
    }
    if(route.name == 'Home') {
      return <Home navigator={navigator} />
    }
  }

  _navigate = () => {
    this.props.navigator.push({
      name: 'Home',
    })
  }

Home只在其renderScene中显示一些Text：

  render() {
    return (
      <Navigator
        renderScene={ this.renderScene.bind(this) }
        navigator={this.props.navigator}
      />
    );
  }

  renderScene(route, navigator){
    return(
      <View style={styles.container}>
        <Text>
          2nd Screen!
        </Text>
      </View>
    )
  }

编辑：我尝试过this._navigate().bind(this)，但仍然无法正常工作

所以，this.props.navigator从未被定义，但我如何定义它？

Answer 1

您无法从回调函数引用导航器的原因是因为操作是从与当前组件不同的其他上下文生成的。

我使用FlatList组件遇到了类似的问题。我将为将来可能面临这个问题的人举个例子。

export default class AlertsScreen extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        alertTypes: [{ key: 'type1', name: 'Alert 1'}, { key: 'type2', name: 'Alert 2'}],
    }
    navigator = this.props.navigator;
}

_onAlertTypePressed(typeId: string, typeName: string){
    navigator.push({
        screen: 'foo.bar.AlertsCreator',
        title: 'Alert',
        passProps: { alertId: typeId }
});

}

在上面的示例中，我从导航器对象获取引用，然后在用户从FlatList中点击项目时使用它来推送新屏幕。

注意：使用Wix/React-native-navigation

Answer 2

尝试将_navigate方法绑定到类的constructor中的正确对象上下文：

class myComponent extends Component {
  constructor() {
    this._navigate = this._navigate.bind(this);
  }

  // NOTE body ...
};