Мое приложение имеет две нижние вкладки, и я хотел бы повторно использовать один и тот же компонент экрана на каждой вкладке, но с разными параметрами (в UserNav задачи относятся к задачам пользователя, а в FriendsNav задачи относятся к другузадач).
Здесь я вижу две опции:
Создание разных файлов экрана для задач пользователя и друзей (даже если все элементы пользовательского интерфейса идентичны) и вытягивание любыхобщие компоненты.Два экрана будут вызывать только общие компоненты.
Использовать один файл экрана - но назначать разные имена маршрутов в каждом навигаторе - затем при вызове компонента использовать информацию, предоставленнуюРеагируйте с Navigation, чтобы определить, какой маршрут / навигатор используется.
В настоящее время я делаю последнее, используя навигацию.состояние соответственно).Я мог бы также сохранить более глобальное состояние навигации с помощью приставки, но это кажется ненужным.
Есть ли рекомендуемый способ достижения цели здесь?
const UserNav = createStackNavigator({
UserTasks: {
screen: Tasks
});
const FriendsNav = createStackNavigator({
FriendTasks: {
screen: Tasks //note using the same screen again
}
});
createBottomTabNavigator({
User: UserNav,
Friends: FriendsNav
})
Экран задач, используя routeName для определения данных
class Tasks extends React.Component {
render() {
//Using the active tab seems cleaner than routeName but it is
//not clear to me how to get this from React Navigation state
const route = this.props.navigation.state.routeName;
//get state from redux
const tasks = (route === "UserTasks" ? this.props.user_tasks : this.props.friend_tasks;
return (//code using tasks)
}