响应本机底部选项卡，导航到愿望屏幕

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。

检查图像

简单地说，下面的代码不工作，它存在于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")；