#react-native #navigation #multi-user
#react-native #навигация #многопользовательский
Вопрос:
В моем приложении есть два типа пользователей. один — партнеры по здравоохранению, а другой — клиенты. итак, давайте предположим, что у меня 4 экрана.
- Главный экран
- Экран меню
- Экран уведомлений
- Экран учетной записи
итак, у меня разные пользовательские интерфейсы на всех 4 экранах, что означает, что домашний экран health partner выглядит по-разному, а для клиентов он должен выглядеть по-другому.
итак, каков наилучший способ сделать это. Должен ли я создавать отдельный экран и отдельные стеки для двух пользователей. значит, тогда есть два стека и 8 экранов. или что вы думаете, пожалуйста, помогите
Ответ №1:
Вы можете сохранить вид пользователя в login as AsyncStorage
и проверить это на всех своих экранах, а затем инициализировать изменения пользовательского интерфейса для этих страниц
Комментарии:
1. хорошо, поэтому нет необходимости создавать отдельную страницу. вместо этого я могу указать на экране, является ли пользователь партнером по здравоохранению, а затем отобразить этот <Просмотр>, если нет, то отобразите этот <Просмотр> .. правильно??
2. Да, вы можете сделать это таким образом, если пользовательский интерфейс несколько похож друг на друга.
Ответ №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;
Вывод: