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 ...
};

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

2 个答案: