Блог

Главная - Вопросы по программированию - Как перейти к двум экранам в родственном навигаторе?

Как перейти к двум экранам в родственном навигаторе?

#react-native #react-navigation

#react-native #react-навигация

Вопрос:

У меня есть настройка навигатора следующим образом: (с использованием react-navigation 5.x)

 <BottomTabNavigator>
  <DashboardNavigator>
    <MainScreen />
  </DashboardNavigator>
  <ItemNavigator>
    <ItemListScreen />
    <ItemDetailScreen />
  </ItemNavigator>
</BottomTabNavigator>

Я хочу перейти от MainScreen к ItemDetailScreen , но я хочу, чтобы кнопка возврата заголовка вела к ItemListScreen . Другими словами, я хочу MainScreen , чтобы меня заменил стек с [ItemListScreen, ItemDetailScreen] помощью .

Я попытался использовать

 navigation.navigate(
  'ItemNavigator',
  {
    screen: 'ItemListScreen',
    params: {
      screen: 'ItemDetailScreen',
      params: {id: itemId}
    }
  }
)

но это только заставляет меня ItemListScreen обходиться без ItemDetailScreen . Как мне это сделать? Перезапуск также не помог

Комментарии:

1. У меня точно такая же проблема. Также читайте об отправке действия сброса, которое я тоже не смог заставить работать. Однако вызов navigate() дважды подряд, сначала для ItemListScreen , а затем для ItemDetailScreen , похоже, создает правильный стек. Хотя я не слишком доволен, делая это таким образом, и надеюсь на лучшее решение…

Ответ №1:

Вы хотите использовать CommonActions

Вот код для потомков:

 import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

В вашем случае просто замените Home на ItemListScreen, а Profile на ItemDetailScreen .

Ответ №2:

Я могу предоставить вам более эффективный способ, который вызывается react-native-navigation , если вы хотите перемещаться между двумя экранами, тогда вот код

 class App extends Component {
  constructor(props) {
    super(props);
    //Setting Up The States
    var data;
    this.state = {
      page: 'home',
      data: {},
    };
  }

  //render method
  render() {
    //return method
    return (
     <NavigationContainer>
     <Stack.Navigator>
        <Stack.Screen name="Screen1" component={Screen}/>
        <Stack.Screen name="Screen2" component={Screen2}/>
     </Stack.Navigator> 
     </NavigationContainer>
    );
  }
}

Это компонент экрана

 const Screen = ({ navigator, router }) => (
   <Text>This Is Screen 1</Text>
   <Button title="Go To Screen 2" onPress={() => {
    navigator.push('Screen2')
   }}/>
)

Это компонент Screen 2

 const Screen2 = ({ navigator, router }) => (
   <Text>This Is Screen 2</Text>
   <Button title="Go To Screen 1" onPress={() => {
    navigator.pop()
   }}/>
)

и это ссылка на React Native Navigation