时间戳

首页 > 解决方案 > 使用 react-native-router-flux 时如何在屏幕之间传递道具

react-native - 使用 react-native-router-flux 时如何在屏幕之间传递道具

问题描述

App.js 狙击手

  render() {
      if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
          return (
              <AppLoading
                  startAsync={this._loadResourcesAsync}
                  onError={this._handleLoadingError}
                  onFinish={this._handleFinishLoading}
              />
          );
      } else if (!this.state.isAuthenticated) {
          return (
              <Router>
                  <Scene key="root">
                      <Scene key="signIn"
                             component={SignIn}
                             title="Scarlet"
                             initial
                      />
                      <Scene
                          key="signUp"
                          component={SignUp}
                          title="Gray"
                      />
                 </Scene>
              </Router>
          )
      } else {
          return (
              <AppNavigator/>
          )
      }
  }

我想做的是将 isAuthenticated 状态变量作为道具传递给 SignIn 组件。然后，在成功调用我的身份验证服务后的 SignIn 回调中，我可以更新 prop 并返回 App.js，而不是渲染 SignIn/SignUp，AppNavigator 组件将被渲染。

我无法找到有关如何在这些值之间传递这些值的文档或示例。

在 react-native-flux-router 中传递道具

我找到了上面的这个例子，但我对道具被分配给handleClick的事实感到困惑

如何将值传递给 React-Native-Router-Flux 中的其他组件？

我还发现了这个例子，它看起来很有希望，但我不确定 Actions.key{props} 的去向。此人似乎已将其分配给 onPress。

我的问题是我没有使用点击在此处的场景之间导航。我在 SignIn 和 SignUp 中使用 Action 对象。

抱歉，我知道这是漫无边际的，但我希望有人以前见过。

标签： react-nativereact-native-router-flux

解决方案

如果我没看错，你想调用一个动作并将一个变量作为属性传递。 Actions.signIn({ isAuthenticated: true });

然后你isAuthenticated在signIn场景中使用这个属性this.props.isAuthenticated。

或者，如果您想将函数作为属性传递：

let myFunction = () => {
  //do some magic here
}; 
Actions.signIn({ doMagic: myFunction });

然后在您的signIn呼叫this.props.doMagic();中myFunction并被呼叫。

推荐阅读