Question

我有一个这样的导航器设置：（使用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。我该怎么做呢？重新启动也无济于事

Answer 1

您想使用 CommonActions

这是后代的代码：

treectrl

在您的情况下，只需将 Home 替换为 ItemListScreen，将 Profile 替换为 ItemDetailScreen。

Answer 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')
   }}/>
)

这是屏幕2组件

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

这是指向React Native Navigation

的链接

如何在同级导航器中导航到两个屏幕？

2 个答案: