开发者问题收集

如何将参数传递给另一个选项卡导航屏幕

2021-08-07
3209

大家好,我对 React Native 还不熟悉,我想问一下如何将参数传递给另一个屏幕?我目前正在做一个登录系统,它将访问用户的电子邮件,并在用户登录后在其个人资料页面上显示他们的电子邮件。我在 profile.js 中尝试了 { this.props.navigation.state.params.Email } ,但它显示错误,提示

TypeError: undefined is not an object (evaluating 'this.props.navigation.state.params')

我也看到了一些相关的解决方案,但那些是用于堆栈导航器的,但我使用的是底部选项卡导航,所以我不确定它们是否以相同的方式工作。

login.js

this.props.navigation.navigate('Profile', { Email: email });

app.js

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={getTransaction} />
        <Tab.Screen name="addTransaction" component={addTransaction} />
        <Tab.Screen name="Register" component={register} />
        <Tab.Screen name="Login" component={login} />
        <Tab.Screen name="Profile" component={profile} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
2个回答

在您的个人资料屏幕页面中:

export const profile = ({route}) => {

const { Email } = route.params;

}

然后您可以将“电子邮件”用作常规常量。

Nathace
2021-08-07

https://reactnavigation.org/docs/params/

我相信您应该从 props.router 而不是 props.navigation 获取参数。

marty
2021-08-07