undefined不是一个对象（评估＆＃39; this.props._navigate.replace / push＆＃39;）

Question

我是React Native的新用户并尝试（按照教程）在单击按钮时移动到另一个屏幕，这是我更新的代码以及按下按钮时出现的错误照片。 index.ios.js：

export default class Application extends Component {

  constructor(){
    super();
  }

  renderScene(route, navigator){
    if(route.name == 'login'){
      return <Login navigator={navigator}/>
    }else if(route.name == 'home'){
      return <Home navigator={navigator}/>
    }
  }

  render() {
    return <Navigator
      initialRoute={{name: 'login'}}
      renderScene={this.renderScene.bind(this)}/>
  }
}

LoginForm的：

export default class LoginForm extends Component{
    constructor(props){
        super(props);
        this.navigate = this.navigate.bind(this);
    }

    navigate(routeName){
        this.props.navigator.replace({
            name: routeName,
            Component: Home
        });
    }
    render(){ 
        return(
            <View style={mStyle.container}>
                <StatusBar barStyle='light-content'/>
                <TouchableOpacity>
                    <Text style={mStyle.btnText}>
                        LOGIN WITH FACEBOOK
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>this.navigate('home')}>
                    <Text style={mStyle.noLoginTxt}>
                        CONTINUE WITHOUT LOGIN
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

单击按钮时，我尝试从登录屏幕移动到主屏幕。 按模拟器上的按钮时出现此问题：

Answer 1

您遇到的几个问题。

1.-语法为：

this.props.navigator.{any_method}

如：

• this.props.navigator.push
• this.props.navigator.replace

不

this.props._navigate.{any_method}

2.-如果您有儿童观点，请确保您向孩子发送Navigator属性，例如。{

<View>
  <MyChildComponent navigator={this.props.navigator} />
</View>

3.-确保您的子视图从构造函数的父级获取道具。

更改

constructor(){
    super();
    this._navigate = this._navigate.bind(this);
}

要

constructor( props ){
    super( props );
    // The following line is not required since you are using an arrow function to call this one. 
    // this._navigate = this._navigate.bind(this);
}

Answer 2

这是因为您在Navigator和组件中使用的属性不匹配

更改

_navigate(name){
        this.props._navigate.replace({ //I also tried push, same problem.
            name
        });
 }

到

_navigate(name){
        this.props.navigator.replace({ //I also tried push, same problem.
            name
        });
}