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

Question

我正在尝试使用 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});" 从注册屏幕发送道具到登录有效，但是从登录屏幕发送道具到标签栏屏幕失败。谁能帮我解决这个问题。

Answer 1

我尝试过以多种不同的方式实现这一目标。但我了解到 "the hard way" 将道具通过 Actions 传递到不同级别的场景（深度，如您的情况 toursHome 场景嵌套在 bottomtourbar 场景下）只能通过以下方式正确完成减少。如果您的场景连接到 redux（使用 connect()），那么更新商店中的状态，它应该可以通过 mapStateToProps 用于您连接的组件。

否则，使用 Actions 在场景之间传递道具对于同一 level/depth 上的场景是可行的（例如，在您的情况下，它将成功地在 Actions 之间传递道具analytics 和 toursHome 或 signup 和 login)

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

send data from screen to Tab screen using react-native-router-flux

javascript

react-native

react-native-android

react-native-ios

react-native-router-flux