Question

我想构建一个在按下某个选项卡栏图标时打开模式的应用程序，否则将导航至其他选项卡。我基本上已经达到了想要的效果，但是我无法在非模式屏幕上显示标题标题。

我尝试弄乱了navigationOptions，stackNavigatorConfig之类的东西，但是似乎没有任何作用。

以下是包含我当前代码的小吃：https://snack.expo.io/@jonathanchaffer/modal_test

作为参考，这是我的App.js（不包括导入）：

const TabNavigator = createBottomTabNavigator(
  {
    HomeTab: {
      screen: HomeScreen,
      navigationOptions: {
        title: "Home",
        tabBarIcon: ({ focused }) => (
          <TabBarIcon
            focused={focused}
            name={Platform.OS === "ios" ? "ios-home" : "md-home"}
          />
        )
      }
    },
    AddTab: {
      screen: () => <View />, // FIXME: Holding down the Add button causes it to navigate to an empty screen.
      navigationOptions: {
        title: "Add",
        tabBarIcon: ({ focused }) => (
          <TabBarIcon
            focused={focused}
            name={Platform.OS === "ios" ? "ios-add-circle" : "md-add-circle"}
          />
        )
      }
    },
    SettingsTab: {
      screen: SettingsScreen,
      navigationOptions: {
        title: "Settings",
        tabBarIcon: ({ focused }) => (
          <TabBarIcon
            focused={focused}
            name={Platform.OS === "ios" ? "ios-settings" : "md-settings"}
          />
        )
      }
    }
  },

  {
    initialRouteName: "HomeTab",
    defaultNavigationOptions: {
      tabBarButtonComponent: TouchableOpacity,
      tabBarOnPress: data => {
        const { navigation, defaultHandler } = data;
        if (navigation.state.key === "AddTab") {
          navigation.navigate("ModalScreen");
        } else {
          defaultHandler(navigation.state.key);
        }
      }
    }
  }
);

const MainNavigator = createStackNavigator(
  {
    Tabs: {
      screen: TabNavigator
    },
    ModalScreen: {
      screen: AddScreen
    }
  },
  {
    initialRouteName: "Tabs",
    mode: "modal"
  }
);

const AppContainer = createAppContainer(MainNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

我希望标题标题出现在所有三个选项卡“ Home”，“ Add”和“ Settings”上，但是目前只显示模式“ Add”。

任何提示或建议将不胜感激。谢谢！

Answer 1

这里的问题是，您在底部的标签导航器中包含了“主屏幕”和“设置屏幕”，因此，当您为它们定义标题时，只会为底部菜单提供标题。您应该做的是，应该为主页和设置屏幕及其标题创建一个堆栈导航器，然后将这些堆栈导航器包含在底部导航器中。

const HomeNavigator = createStackNavigator({
    HomeScreen: { screen: HomeScreen,
      title:"Home Screen"
  }
}
);

const SettingsNavigator = createStackNavigator({
    SettingsScreen: { screen: SettingsScreen,
      title:"Settings Screen"
  }
}
);

然后，您应该在底部导航器中执行此操作：

HomeTab: {
      screen: HomeNavigator,
   ...
SettingsTab: {
  screen: SettingsNavigator,
   ...

最后，您应该为底部标签隐藏主堆栈导航器的标题，否则将有两个标题用于主页和设置屏幕

Tabs: {
      screen: TabNavigator,
      navigationOptions:({navigation}) => ({
      header: null,
      })
    }

我曾在您的世博会小吃中尝试过此方法，它确实有效。希望对您有帮助。

使用模态时标题标题不显示吗？

1 个答案: