React Native - Как отправить параметры / реквизиты в BottomTabNavigator с помощью React Navigation 5?

Question

Я создаю приложение с React Native, и мне нужно отправить параметры с одного экрана на все экраны вкладки Navigator.

Сводка экрана:

• Войти
• Домашняя страница
• Профиль (вкладка)
• Настройки (вкладка)

Мне нужно отправить имя пользователя из Login to Home и Из дома в профиль и настройки

Приложение. 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;

Вход. 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>
    )
  }
}

Дом. 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>
    )
  }
}

Профиль. 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>
    );
  }
}

Как мне отправлять и получать параметры

Из логина в дом:

логин. js:

<Button title="Log in" onPress={() => this.props.navigation.navigate('Home', {name: 'Sergio'})}/>

Дом. js:

const { name} = this.props.route.params;
console.log(name); //The result is Sergio

из дома в профиль / Настройки:

Дом. js:

<Button title="GO TO TABS" onPress={() => this.props.navigation.navigate('Tabs', {name})}/>

Профиль. js:

v1 = const { name} =  this.props.navigation.state.params.name
v2 = const { name} = this.props.route.params;
console.log(name); //In both the value is undefined

Answer 1

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

Получите доступ, как это

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