React - 传递道具,导航器中的错误设置?

时间:2018-05-01 09:15:47

标签: javascript reactjs react-native

我正在尝试不同的方式在文件之间传递道具。我很反应而且非常糟糕所以我不明白我做错了什么或发送它的方式不同。无论哪种方式,它都可以在' main'并且' favplaces'但不是在login和main之间,这让我觉得它与App的设置方式有关。如果我记录了我从Login中获得的params,那么我得到了未定义或应用程序崩溃说" undefined不是对象"。

应用:

const mainOptions = SwitchNavigator({
  main : Main,
  favPlaces : favPlaces,

})
const introStack = StackNavigator({
  logIn : LogIn,
  register : Register
})

const SwNavigator = SwitchNavigator({
  login : introStack,
  main : mainOptions

})

登录:

   constructor(props){
        super(props);
        this.state={
            username: "",
            password:"",

        }
        this.signIn = this.signIn.bind(this);
        this.navigate = this.props.navigation.navigate;
        this.params = this.props.navigation.state.params;
      }
     {......}
  signIn(){
        console.log("username", this.state.username)

        this.navigate({
    routeName: 'main',
    key: 'main',
    params: {
       username: this.state.username
    }
 });
  }

主:

    constructor(props) {
            super(props);
        this.navigate = this.props.navigation.navigate;
        this.params = this.props.navigation.state.params;
    }
 handleClickFavourite = () => {
   console.log(this.state.latitude)
   this.navigate({
   routeName: 'favPlaces',
   key: 'favPlaces',
   params: {
      latitude: this.state.latitude
   }
});   

}

favPlace:

    constructor(props){
        super(props);
        this.navigate = this.props.navigation.navigate;
        this.params = this.props.navigation.state.params;
      }

   render()
      console.log("1", this.props.navigation.state.params.latitude);
      console.log("2", this.params.latitude);

这两个日志都有效。

1 个答案:

答案 0 :(得分:2)

我设法让它发挥作用。我删除了mainOptions导航器,并将导航器更改为:

const introStack = StackNavigator({
  loggingIn : LoggingIn,
  register : Register
})

const SwNavigator = SwitchNavigator({
  //login : introStack,
  loggingIn : introStack,
  main : Main,
  favPlaces : favPlaces,
  register : Register

})