Блог

В моем приложении есть два типа пользователей. один — партнеры по здравоохранению, а другой — клиенты. итак, давайте предположим, что у меня 4 экрана.

1. Главный экран
2. Экран меню
3. Экран уведомлений
4. Экран учетной записи

итак, у меня разные пользовательские интерфейсы на всех 4 экранах, что означает, что домашний экран health partner выглядит по-разному, а для клиентов он должен выглядеть по-другому.

итак, каков наилучший способ сделать это. Должен ли я создавать отдельный экран и отдельные стеки для двух пользователей. значит, тогда есть два стека и 8 экранов. или что вы думаете, пожалуйста, помогите

Вы можете сохранить вид пользователя в login as AsyncStorage и проверить это на всех своих экранах, а затем инициализировать изменения пользовательского интерфейса для этих страниц

Вот один из подходов: когда вы подключаете пользователя, будь то при входе в систему или иным образом, передайте параметр в навигации, а затем примените соответствующий стиль в зависимости от типа пользователя.

Вот рабочий пример: 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;


 

Вывод: