时间戳

首页 > 解决方案 > React - 传递道具，导航器中的设置错误？

javascript - React - 传递道具，导航器中的设置错误？

问题描述

我正在尝试不同的方式在文件之间传递道具。我对反应非常陌生，而且非常不擅长，所以我不明白我做错了什么或发送它的不同方式。无论哪种方式，它都可以在“main”和“favplaces”之间工作，但不能在 login 和 main 之间工作，这让我认为它与 App 的设置方式有关。如果我在 main 中记录从 Login 获得的参数，那么我要么得到未定义，要么应用程序崩溃说“未定义不是对象”。

应用程序：

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

}

最喜欢的地方：

    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);

这两个日志都有效。

标签： javascriptreactjsreact-native

解决方案

我设法让它工作。我删除了 mainOptions 导航器并将导航器更改为：

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

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

})

推荐阅读