0

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

画面总结：

  • 登录
  • 家
  • 配置文件（选项卡）
  • 设置（选项卡）

我需要将用户名从 Login 发送到 Home 并从 Home 发送到 Profile and Settings

应用程序.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>
    )
  }
}

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>
    );
  }
}

我如何发送和接收参数

从登录到主页：

登录.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})}/>

Profile.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
4

2 回答 2

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

像这样访问它

  const { name} =  this.props.navigation.state.params.name
于 2020-04-01T11:28:39.567 回答
0

如果您使用的是 react native navigation 5，那么您可以执行以下操作：

来自组件 A：

import { useNavigation } from "@react-navigation/native";

const navigation = useNavigation();

onPress={() => navigation.navigate("Profile", { name })}

来自组件 B：

import { useNavigation } from "@react-navigation/native";

const navigation = useNavigation();

const routeIndex = navigation.dangerouslyGetState().index;

const name =  navigation.dangerouslyGetState().routes[routeIndex].params.name
于 2020-11-12T21:33:40.003 回答