如何在反应导航 5 中的选项卡导航器中的选项卡屏幕之间移动？

Question

<NavigationContainer>
      <Tabs.Navigator>
        <Tabs.Screen name="Home" component={HomeStack} />
        <Tabs.Screen name="Discover" component={Discover} />
      </Tabs.Navigator>
    </NavigationContainer>

我在 Home Stack 中有一个搜索组件......并且我在 Discover 中有一个搜索按钮，它可以让我搜索 Home 堆栈中的组件，但是当我使用navigator.back()时，它把我带到了 home 组件而不是发现组件HomeStack 中的堆栈导航器是这样的：

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

我希望后退按钮将我带到最后一个屏幕而不是该堆栈的根屏幕

Answer 1

如果您执行以下操作，它将非常有效并且更易于组织。

首先，您将在主 js 文件中创建 StackNavigator，在此示例中为 App.js。 您还将创建一个文件夹来存储您的屏幕（在这种情况下，我将调用 src）

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每个屏幕，并将其导入您的 App.js 文件中，其中将列出屏幕（导入并接收一个键），您将创建您的导航器。

在您的屏幕内，您将使用navigation.navigate('key')导航到任何屏幕。 请参阅示例：

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

这是我可以向您推荐的一种更简单的方法，并且还可以使用按钮返回到上一个屏幕。