如何在 React Native 中为两个不同的用户创建屏幕和导航

Question

我的应用中有两种类型的用户。一个是健康合作伙伴，另一个是客户。所以假设我有 4 个屏幕。

主屏幕
菜单屏幕
通知屏幕
帐户屏幕

所以我在所有 4 个屏幕中都有不同的用户界面，这意味着健康合作伙伴的主屏幕看起来不同，对于客户来说应该看起来不同。

那么最好的方法是什么。我应该为两个用户创建单独的屏幕和单独的堆栈吗？意味着然后有两个堆栈和 8 个屏幕。或者你有什么想法请帮忙

Answer 1

您可以在登录时将用户类型另存为 AsyncStorage 并在您的所有屏幕中进行检查，然后初始化该页面的 UI 更改

Answer 2

这是一种方法，当您在登录或其他方式引导用户时，在导航中传递一个参数，然后根据用户类型应用适当的样式。

这是工作示例：Expo Snack

import * as React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function Login({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Login Screen</Text>
      <View style={{ margin: 10 }}>
        <Button
          title="Health Partner"
          onPress={() => navigation.navigate('Home', { type: 'partner' })}
        />
      </View>
      <View style={{ margin: 10 }}>
        <Button
          title="User"
          onPress={() => navigation.navigate('Home', { type: 'user' })}
        />
      </View>
    </View>
  );
}

function HomeScreen({ route }) {
  let { type } = route.params;
  return (
    <View style={type === 'user' ? styles.user : styles.partner}>
      <Text>{`Home Screen ${type}`}</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  user: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'pink',
  },
  partner: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'yellow',
  },
});

export default App;

输出：

如何在 React Native 中为两个不同的用户创建屏幕和导航

how to create screen and navigations for two different users in react native

navigation

multi-user

react-native