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

时间:2018-10-30 04:56:48

标签: 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组件。

我在查找文档或如何在它们之间传递这些值的示例时遇到了麻烦。

Passing props in react-native-flux-router

我找到了上面的示例,但是我对道具分配给handleClick感到困惑,

How to pass values to other component in React-Native-Router-Flux?

我也找到了这个示例,它看起来很有希望,但是我不确定Actions.key {props}的去向。此人似乎已将其分配给onPress。

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

对不起,我知道这很麻烦,但我希望有人以前见过。

1 个答案:

答案 0 :(得分:1)

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

然后,您在isAuthenticated场景中将此signIn属性与this.props.isAuthenticated一起使用。

或者如果您要将函数作为属性传递:

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

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