react-native - 使用模式时没有显示标题？

问题描述

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

我尝试过使用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 />;
  }
}

我希望标题标题会显示在所有三个选项卡“主页”、“添加”和“设置”中，但目前它只显示在模式“添加”中。

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

标签： react-nativereact-navigation

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

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,
      })
    }

我在你的世博小吃中试过这个，效果很好。希望它可以帮助你。

react-native - 使用模式时没有显示标题？

问题描述

解决方案

推荐阅读