反应原生底部选项卡导航到所需屏幕

Question

首先我创建底部选项卡并在核心导航器中导入；

const BottomTabs = createBottomTabNavigator();
function BottomTabNavigator({ navigation, route }) {


  return (
    <BottomTabs.Navigator>
      <BottomTabs.Screen
        name="ExploreTab"
        component={ExploreNavigator}
      />

      <BottomTabs.Screen
        name="FormScreen"
        component={ProfileNavigator}
        options={({ navigation }) => ({
          tabBarLabel: "",
          tabBarButton: (props) => (
            <TouchableOpacity
              {...props}
              onPress={() => {
                console.log({ navigation });
                navigation.navigate("FormScreen");
              }}
            >
              <View>
                <Icon
                  type="font-awesome-5"
                  name="plus"
                  size={moderateScale(25)}
                  color={Colors.white}
                />
              </View>
            </TouchableOpacity>
          ),
        })}
      />
      <BottomTabs.Screen
        name="ProfileTab"
        component={ProfileNavigator}
      />
    </BottomTabs.Navigator>
  );
}
export default BottomTabNavigator;

底部标签导航器是核心导航器的一部分，核心导航器是应用级导航器。

function CoreNavigator() {
  return (
    <CoreStack.Navigator>
      <CoreStack.Screen
        name="BottomTabNavigator"
        component={BottomTabNavigator}
        options={{
          headerShown: false,
        }}
      />
      <CoreStack.Screen name="AboutScreen" component={AboutScreen} />
      <CoreStack.Screen name="WebScreen" component={WebScreen} />
    </CoreStack.Navigator>
  );
}

当我点击底部标签中间的加号按钮时。它应该导航到表单屏幕FormScreen。

Check image

简而言之，下面的代码不起作用，它出现在 Botton 选项卡导航器中。 当我单击底部加号按钮时，波纹管应用程序导航到 ProfileNavigators 默认屏幕。我希望应用导航到 FormScreen。

<BottomTabs.Screen
        name="FormScreen"
        component={ProfileNavigator}
        options={({ navigation }) => ({
          tabBarLabel: "",
          tabBarButton: (props) => (
            <TouchableOpacity
              {...props}
              onPress={() => {
                console.log({ navigation });
                navigation.navigate("FormScreen");
              }}
            >
              <View>
                <Icon
                  type="font-awesome-5"
                  name="plus"
                  size={moderateScale(25)}
                  color={Colors.white}
                />
              </View>
            </TouchableOpacity>
          ),
        })}
      />

Answer 1

尝试使用：

navigation.reset({
  index: 0,
  routes: [{ name: 'FormScreen' }],
});

而不是navigation.navigate("FormScreen");