Как перемещаться между экранами вкладок в навигаторе вкладок в React Navigation 5? - PullRequest
Новая
       20

Как перемещаться между экранами вкладок в навигаторе вкладок в React Navigation 5?

1 голос
/ 01 августа 2020 
<NavigationContainer>
      <Tabs.Navigator>
        <Tabs.Screen name="Home" component={HomeStack} />
        <Tabs.Screen name="Discover" component={Discover} />
      </Tabs.Navigator>
    </NavigationContainer>

У меня есть компонент поиска в домашнем стеке ... И у меня есть кнопка поиска в обнаружении, которая приводит меня к поиску компонента в домашнем стеке, но когда я использую navigator.back(), я перехожу к домашнему компоненту вместо Откройте для себя компонент Навигатор стека в HomeStack выглядит следующим образом: 

<Stack.Navigator initialRouteName="HomeScreen">
      <Stack.Screen
        name="HomeScreen"
        component={HomeScreen}
      />
      <Stack.Screen
        name="SearchScreen"
        component={SearchScreen} // this is the search component
      />
    </Stack.Navigator>

Я хочу, чтобы кнопка возврата вернула меня к последнему экрану вместо экрана root этого стека

1 Ответ

0 голосов
/ 02 августа 2020

Если вы сделаете следующее, он будет работать очень хорошо, и его будет легче организовать.

Сначала , вы создадите StackNavigator внутри вашего основного файла js, в этом примере будет App. js. Вы также создадите одну папку для хранения ваших экранов (в этом случае я назову sr c)

App. js будет выглядеть так: 

import HomeScreen from '../src/screens/HomeScreen .js // importing screens
import SearchScreen from '../src/screens/SearchScreen.js
.
.
.

const navigator = createStackNavigator(
    {
        Screen1Ref: HomeScreen,
        Screen2Ref: SearchScreen ,
        .
        .
        .
    },
    {
        initialRouteName: 'HomeScreen ',
        defaultNavigationOptions: {
            title: 'name',
        },
    }
);

export default createAppContainer(navigator);

Во-вторых, , вы создадите свои экраны и export default каждый экран и импортируете его в свое приложение. js файл, в котором будут перечислены экраны (импортированы и получат один ключ), и вы создадите свои навигаторы.

Внутри ваших экранов вы будете использовать navigation.navigate('key') для перехода к любому экрану. См. Пример: 

const ScreeExample = ({navigation}) => {
     return (
          <Text>Testing</Test>
          navigation.navigate('Screen1Ref')
     )
}
export default ScreenExample

Это более простой способ, который я могу вам порекомендовать, и он также будет работать с кнопкой для возврата к предыдущему экрану.

...