Question

我正在使用Navigator组件，并希望将数据从组件传递到另一个组件。这是一些代码。

renderScene(route, navigator) {
    var routeId = route.id;
    if (routeId === 'SplashPage') {
        return (
            <SplashPage
        navigator={navigator} />
    );
    }
    if (routeId === 'Login') {
        return (
            <Login
        navigator={navigator} />
    );
    }
    if (routeId === 'Home') {
        return (
            <Home
        navigator={navigator} />
    );
    }
    ....

我想在点击按钮时将数据从登录传递到家庭

this.props.navigator.replace({
        id: 'Home',
        passProps: {
            currentUser: this.user,
        }
    })

我想在Home Component中获取currentUser。我已经尝试了一些我找到的代码，但似乎没有任何效果。

这是我想做的事情：

class Home extends React.Component {
constructor(props){
    super(props);
    this.currentUser = ????????
}

如果有人能帮助我，我将不胜感激。

由于

Answer 1

您可以像这样设置renderScene方法：

renderScene={(route, navigator) => {
  return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
}}

并像这样使用它：

this.props.navigator.replace({
    component: Home,
    passProps: {
        currentUser: this.user,
    }
})

在Home中，您可以像这样访问currentUser：

<Text>{ this.props.currentUser }</Text>

查看this主题以获取更详细的示例，但这应该适合您。

如何使用react native Navigator将数据传递给其他组件

1 个答案: