将道具从 App.js 传递到 Stack.Screen React Native

Question

我再次提出有关 ReactNative 的问题：我有以下 App.js：

export default function App() {

  function Tabs() {
    return <TabBar />;
  }

  const styles = StyleSheet.create({
    backButton: {
      color: global.GUI.ORANGE,
    },
  });

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Tabs"
          component={Tabs}
          ..
        />
        <Stack.Screen
          name="Impostazioni"
          component={Settings}
          ...
        />
        <Stack.Screen
          name="Registrati"
          component={Signup}
         ...
        />
        <Stack.Screen
          name="Login"
          component={Login}
          ...
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我想向每个组件传递一些在 App.js 中声明的值，但是做一些类似的事情：

            <Stack.Screen
              name="Impostazioni"
              component={Settings}
              currentUser={"name":"test"}
            />

Return 未定义于：

import React from 'react';
import {View,Text} from 'react-native';

const Settings = (props) => {
  --> console.log(props.currentUser) // here is undefined
  return (
    <View >
     <Text>This is Settings!</Text>
    </View>
  );
};

export default Settings

那么，我怎样才能正确地将 App.js 的 props 传递给所有其他组件？

谢谢

Answer 1

您必须使用 React Context（推荐）或将 props 传递给您的组件。

https://wix.github.io/react-native-navigation/docs/third-party-react-context/

另一种方式：

<Stack.Navigator initialRouteName="LoginScreen" headerMode="none">
 <Stack.Screen name="LoginScreen" component={LoginScreen} initialParams={{'key':'value'}} />
 <Stack.Screen name="CodeVerificationScreen" component={CodeVerificationScreen} initialParams={{'key':'value'}} />
</Stack.Navigator>

您可以在 login.js

中接收初始参数

console.log(this.props.route.params.key)

另一种方法：

将道具传递给组件 - 文档 link:（请检查您的导航版本） https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props

将道具从 App.js 传递到 Stack.Screen React Native

Passsing props from App.js to Stack.Screen React Native

javascript

react-native

react-props