react-native - react native 中的异步条件组件渲染
问题描述
我正在尝试在我的 RN 应用程序中设置前端身份验证系统,但在呈现身份验证视图或主应用程序视图时遇到问题。
根导航器是呈现身份验证视图或主视图的内容,我有一个变量signedIn
来检查用户是否已登录
const Stack = createStackNavigator<RootStackParamList>();
async function RootNavigator({ signedIn }: { signedIn: boolean | undefined }) {
if (!signedIn) {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Auth" component={AuthenticationNavigator} />
<Stack.Screen
name="NotFound"
component={NotFoundScreen}
options={{ title: "Oops!" }}
/>
</Stack.Navigator>
);
} else {
return (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Root" component={BottomTabNavigator} />
<Stack.Screen
name="NotFound"
component={NotFoundScreen}
options={{ title: "Oops!" }}
/>
</Stack.Navigator>
);
}
}
登录变量通过我的主导航功能传递
export default function Navigation({
colorScheme,
authStatus
}: {
colorScheme: ColorSchemeName;
authStatus: boolean | undefined
}) {
return (
<NavigationContainer
theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
>
<RootNavigator signedIn={authStatus} />
</NavigationContainer>
);
}
最后 authStatus 变量来自我的主要应用程序功能
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const [checkAuth, setCheckAuth] = useState(false);
const [signedIn, setSignedIn] = useState(false);
let [fontsLoaded] = useFonts({
Roboto_100Thin_Italic,
Roboto_400Regular,
Roboto_700Bold,
});
useEffect(() => {
async function fetchToken() {
try {
const token = await SecureStore.getItemAsync('access_token');
if (token) {
setSignedIn(true);
} else {
setSignedIn(false);
}
} catch (error) {
console.log(error)
} finally {
setCheckAuth(true);
}
}
fetchToken()
}, [])
if ((!isLoadingComplete || !fontsLoaded) && !checkAuth) {
return <AppLoading />;
} else {
return (
<SafeAreaProvider style={{ flex: 1 }}>
<Provider store={store}>
<PersistGate persistor={persistor} loading={<AppLoading />}>
<StatusBar style="auto" />
<Navigation colorScheme={colorScheme} authStatus={signedIn} />
</PersistGate>
</Provider>
</SafeAreaProvider>
);
}
}
我目前在 RootNavigator 中遇到打字稿错误
'RootNavigator' cannot be used as a JSX component.
Its return type 'Promise<Element>' is not a valid JSX element.
当我执行代码时,我在控制台中收到此错误
Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.
解决方案
推荐阅读
- javascript - 如何在注册期间将用户保存到 Firestore 数据库?到目前为止,它只保存在firestore的Authentication中
- python - PYOMO:如何使用 glpk 创建求解器
- sql - 同时将 CSV 加载到 PostgreSQL 转换类型中
- javascript - React Native FlatList 被截断并且不显示所有项目
- sql - 在 SQL Server 2019 中,是否有任何最佳和有效的方法来对包含约 3000 万条数据的表进行分区,且停机时间最短?
- amazon-web-services - 普通用户在kibana中需要什么权限
- tensorflow - 如何修改冻结的 pb 文件?
- powershell - Visual Studio Code 在非默认终端上打开并运行脚本
- flutter - 需要在 Flutter App 中检查输入的值是否为数量
- mysql - 实体框架mysql连接字符串错误?