使用react-native-router-flux将数据从屏幕发送到Tab屏幕

时间:2019-03-20 09:46:09

标签: javascript react-native react-native-android react-native-ios react-native-router-flux

我正在尝试使用react-native-router-flux将数据从一个屏幕发送到另一个屏幕,但是问题是我无法在屏幕的接收端接收数据。这是我的代码段:

在router.js中

<Router>
    <Stack key="root">
      <Scene
        key="signup"
        component={Signup}
        title=""
        initial={true}
        hideNavBar={true}
      />
      <Scene key="login" component={Login} title="" />

      <Scene key="bottomtourbar" tabs={true} hideNavBar={true}>
        <Scene
          key="toursHome"
          component={Tours}
          title="Tours"
          hideTabBar={true}
          hideNavBar={false}
        />
        <Scene
          key="analytics"
          component={Analytics}
          title="Analytics"
          hideNavBar={true}
          hideNavBar={false}
        />
       </Scene>
      </Stack>
  </Router>

在Login.js中,使用以下代码将参数传递给ToursHome页面

Actions.toursHome({dataResponse:jsonResponse});

在ToursHome.js文件中,我试图访问登录页面发送的参数

export default class Tours extends Component {
  constructor(props) {
    super(props);
  };
  render() {
    const responseData = this.props.dataResponse;
    console.log(responseData);
    return (
      <View style={styles.container}>
        <ToursTab />
        <View style={styles.TabbedContainer}>
          <Text>{responseData}</Text>
        </View>

        <ToursBottom />
      </View>
    );
  }
}

在控制台中,它打印为未定义。

使用“ Actions.login({dataResponse:jsonResponse});”从注册屏幕发送登录道具可以正常工作,但是从登录到标签栏屏幕发送道具失败。 谁能帮助我解决这个问题。

1 个答案:

答案 0 :(得分:1)

我曾尝试以多种不同方式实现这一目标。但是我学到了“艰难的方式”,即只有通过以下方式才能正确地将道具从Actions传递到不同级别的场景(深度,例如toursHome场景嵌套在bottomtourbar场景下) redux。如果您的场景已连接到redux(使用connect()),则更新存储中的状态,并且该状态应可通过mapStateToProps用于所连接的组件。

否则,对于相同级别/深度的场景,使用Actions在场景之间传递道具是可行的(例如,在您的情况下,要在{{1}之间成功使用Actions传递道具}和analyticstoursHomesignup