React Native-如何使用React Navigation 5将参数/道具发送到BottomTabNavigator？

Question

我正在使用React Native创建一个应用程序，我需要将参数从一个屏幕发送到选项卡导航器的所有屏幕。

屏幕摘要：

• 登录
• 首页
• 个人资料（标签）
• 设置（标签）

我需要将用户名从“登录名”发送到“主页”，从“主页”发送到“个人资料和设置”

App.js

import 'react-native-gesture-handler';
import * as React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';

import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Settings from './Screens/Settings';
import Profile from './Screens/Profile';
import Home from './Screens/Home';
import Login from './Screens/Login';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function TabRoutes() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'Profile') {
            iconName = focused ? 'home' : 'home';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'cog' : 'cog';
          }
          return <Icon name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}
    >
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Tabs" component={TabRoutes} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Login.js

export default class Login extends React.Component {
  render() {
    return (
      <View>
        <Text>Welcome</Text>
        <Button title="Log in" onPress={() => this.props.navigation.navigate('Home', {name: 'Sergio'})}/>
      </View>
    )
  }
}

Home.js->在这里，我需要向所有选项卡发送用户名

export default class Home extends React.Component {
  render() {
    const { name} = this.props.route.params;
    return (
      <View>
        <Text>Home</Text>
        <Text>Hello {name}</Text>
        <Button title="GO TO TABS" onPress={() => this.props.navigation.navigate('Tabs')}/>
      </View>
    )
  }
}

Profile.js

export default class Profile extends React.Component {

  render() {
    return (
      <View>
        <TextInput
          style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
        />
        <Text>Profile</Text>
        <Text>Hello @</Text> //Here i want to see the name of the user
      </View>
    );
  }
}

Answer 1

onPress(name) {
 this.props.navigation.navigate('Tabs'),
    { name },
  );
}

以这种方式访问​​它

  const { name} =  this.props.navigation.state.params.name