React native 使用react native中的react导航将状态从主App.js传递到屏幕组件

我正在用react native制作一个小应用程序，它是一个基本的登录工作流，使用两个屏幕（登录和主页），根据用户状态显示；在App.js中，我有一系列状态，我使用这些状态来启用/解除视图、按钮、显示用户名等等。 我在外部组件中有登录屏幕和主屏幕。我想知道（除了使用上下文）是否有一种方法可以使这些状态（和函数）对子屏幕可用

这是我代码的一部分：

App.js

export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [isLogged, setIsLogged] = useState(false);
  const [userToken, setUserToken] = useState(null);
  const [userProfile, setUserProfile] = useState(null);
  const [email, setEmail] = useState(null);
  const [password, setPassword] = useState(null);
  const [loggingIn, setloggingIn] = useState(false);
  const [error, setError] = useState(null);

  const AppStack = createStackNavigator();

  useEffect(() => {
    AsyncStorage.getItem('userProfile').then((value) => {
      if (value) {
        console.log(JSON.parse(value)),
          setUserProfile(JSON.parse(value)),
          setIsLoading(false),
          setIsLogged(true);
      } else {
        setIsLoading(false), setIsLogged(false);
      }
    });
  }, []);

  const doLogout = async () => {
---- LOGOUT CODE 
}
const doLogin = async () => {
----- LOGIN CODE and UPDATE of state and asyncstorage
}
return (
    <NavigationContainer>
      <AppStack.Navigator initialRouteName="Login">
        <AppStack.Screen name="Login" component={Login} />
        <AppStack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
      </AppStack.Navigator>
    </NavigationContainer>
  );

const Login = ({ loggingIn, userProfile }) => {
  console.log(userProfile);
  return (
    <View style={styles.container}>
      <Button
        title="Login to Site"
        onPress={() => doLogin()}
        disabled={loggingIn}
      >
        {userProfile && userProfile.name} Login to Site
      </Button>
    </View>
  );
};

导出默认函数App（）{
const[isLoading，setIsLoading]=useState（true）；
const[isLogged，setIsLogged]=useState（false）；
const[userToken，setUserToken]=useState（null）；
const[userProfile，setUserProfile]=useState（null）；
const[email，setEmail]=useState（null）；
const[password，setPassword]=useState（null）；
const[logging，setlogging]=使用状态（false）；
const[error，setError]=useState（null）；
const AppStack=createStackNavigator（）；
useffect（（）=>{
AsyncStorage.getItem（'userProfile'）。然后（（值）=>{
如果（值）{
console.log（JSON.parse（value）），
setUserProfile（JSON.parse（value）），
设置加载（错误），
setIsLogged（真）；
}否则{
setIsLoading（假）、SetIsLoged（假）；
}
});
}, []);
const doLogout=async（）=>{
----注销代码
}
const doLogin=async（）=>{
-----登录代码以及状态和异步存储的更新
}
返回(
);

Login.js

export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [isLogged, setIsLogged] = useState(false);
  const [userToken, setUserToken] = useState(null);
  const [userProfile, setUserProfile] = useState(null);
  const [email, setEmail] = useState(null);
  const [password, setPassword] = useState(null);
  const [loggingIn, setloggingIn] = useState(false);
  const [error, setError] = useState(null);

  const AppStack = createStackNavigator();

  useEffect(() => {
    AsyncStorage.getItem('userProfile').then((value) => {
      if (value) {
        console.log(JSON.parse(value)),
          setUserProfile(JSON.parse(value)),
          setIsLoading(false),
          setIsLogged(true);
      } else {
        setIsLoading(false), setIsLogged(false);
      }
    });
  }, []);

  const doLogout = async () => {
---- LOGOUT CODE 
}
const doLogin = async () => {
----- LOGIN CODE and UPDATE of state and asyncstorage
}
return (
    <NavigationContainer>
      <AppStack.Navigator initialRouteName="Login">
        <AppStack.Screen name="Login" component={Login} />
        <AppStack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
      </AppStack.Navigator>
    </NavigationContainer>
  );

const Login = ({ loggingIn, userProfile }) => {
  console.log(userProfile);
  return (
    <View style={styles.container}>
      <Button
        title="Login to Site"
        onPress={() => doLogin()}
        disabled={loggingIn}
      >
        {userProfile && userProfile.name} Login to Site
      </Button>
    </View>
  );
};

const Login=（{loggingIn，userProfile}）=>{
log（userProfile）；
返回(
多洛金（）}
禁用={loggingIn}
>
{userProfile&&userProfile.name}登录到站点
);
};

如何访问loggingIn（甚至userProfile）和doLogin（）函数

---

我在App.js中设置并创建（和更新）的？应该有一种简单的方法（除了useContext）用于像这样的简单用途。

您可以将参数传递给routes。请参见此处的第一节：

但您可能希望将状态移动到其相关的屏幕组件或其他组件。然后，在父组件中，将值传递给子组件。请参阅下面的TestComponent.js。然后，在子组件中，我们可以使用从父组件传入的道具。请参见下面的TestChildComponent.js

我还提供了App.js、TestNavigator.js和TestScreen.js，这样您就可以复制/粘贴它们并测试自己

此外，如果您发现自己使用useState钩子管理了太多的状态，那么您可以考虑使用useState钩子而不是useState钩子来进行状态管理

---

下面的代码：

---

TestComponent.js：

import React，{useState}来自“React”；
从“react native”导入{View，StyleSheet}；
从“/TestChildComponent”导入ChildComponent；
const TestComponent=props=>{
const[value，setValue]=useState（“Bilbo”）；
返回(
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
差额：100，
},
});
导出默认测试组件；

TestChildComponent.js：

从“React”导入React；
从“react native”导入{样式表、文本、按钮、视图}；
const ChildComponent=props=>{
常量按钮PressHandler=（）=>{
道具设定值（“佛罗多”）；
};
返回(
请按我：
);
};
导出默认子组件；
const styles=StyleSheet.create({
儿童：{
flexDirection:“行”，
marginHorizontal:25，
辩护内容：“中心”，
对齐项目：“中心”，
},
});

TestNavigator.js：

从“React”导入React；
从“@react navigation/stack”导入{createStackNavigator}；
从“/TestScreen”导入TestScreen；
const TestStackNavigator=createStackNavigator（）；
导出常量TestNavigator=（）=>{
返回(
);
};

App.js

从“React”导入React；
从“react native”导入{StyleSheet，SafeAreaView}；
从“@react-navigation/native”导入{NavigationContainer}”；
从“/TestNavigator”导入{TestNavigator}；
导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
安全区域视图：{
弹性：1，
}
});

TestScreen.js

从“React”导入React；
从“/TestComponent”导入TestComponent；
const TestScreen=props=>{
返回(
);
};
导出默认测试屏幕；

谢谢你，你的解决方案当然可以，但是要用这个解决方案构建一个3个文件的应用程序（app.js login.js home.js），我会嵌套5个文件！在这一点上，我可以使用上下文，并保持3个文件的结构，在上下文和子上下文中添加状态和函数，从上下文中获取我需要的内容。没问题，为什么不能有3个以上的文件？此外，您还可以查看此链接：。第一部分将向您展示如何向routes传递参数。好吧，我不需要超过3个文件，我只是为一节课制作了一个原型，我想继续讨论主题（使用api登录），如果我开始移动内容（上下文，redux），它将变得太分散，无论如何我用上下文解决了，以尽可能小的占地面积