Как правильно организовывать navigator в react native(expo)

Question

Появилась задача на создание приложения с помощью react native. В предыдущих проектах окон было немного и я свалиливал их в одну кучу по типу вот этого:

  <Stack.Navigator initialRouteName="Start">
  <Stack.Screen name="Start" component={StartPage} options={{ headerShown: false }} />
  <Stack.Screen name="Register" component={RegPage} />
  <Stack.Screen name="CodeConfirm" component={CodePage} />
  </Stack.Navigator>

Но такой подход будет жутко неудобен, если получается так, что окон будет больше 5 и это превращается в кашу. Можно ли как-то делить это все на файлы и если да, то как в дальнейшим с ними взаимодействовать?

Answer 1

Как правильно организовывать navigator в react native(expo)

Там довольно широкий ассортимент действий со стек навигатором...

Есть группы

<Stack.Navigator initialRouteName="Root" screenOptions={so}>
  <Stack.Screen name="Root" component={Tab} options={{ headerShown: false }} />
  <Stack.Group>
    <Stack.Screen name="Product" component={Product} options={{...tt, headerShown: false}} />
    <Stack.Screen name="Review" component={Review} options = {{title: 'Отзывы'}} />
    <Stack.Screen name="Msg" component={Msg} options = {{title: 'Сообщения'}} />
    <Stack.Screen name="Details" component={Details} options = {test} />
    <Stack.Screen name="Check" component={Check} options = {{title: 'Чек'}} />
    <Stack.Screen name="Tablet" component={Tablet} options = {{title: 'Столик'}} />
    <Stack.Screen name="Invoice" component={Invoice} options = {{title: 'Счет'}} />
    <Stack.Screen name="Login" component={Login} options = {{title: 'Авторизация'}} />
  </Stack.Group>
</Stack.Navigator>

Можно мапить...

<Stack.Navigator initialRouteName='Menu' screenOptions={{...so}}>
  {amenu.map(el => <Stack.Screen key={el.name} name={el.name} component={el.cmp} options={el.opt} />)}
</Stack.Navigator>

только я не понял, как переходить в таком случае по страницам из одного файла в другой

navigation.navigate('имя_экрана', [объект_с_данными]);

Пример

export default function Profile({navigation, route}) {
   // ...
   navigation.navigate('Msg', { userId: 1 });
   // ...
}

БЛОГ НА HUSL

Как правильно организовывать navigator в react native(expo)

Ответы (1 шт):