Question

我想在堆栈导航器下显示底部标签，这是我的代码：

const todosScreen = {
  screen: TodosScreen,
  navigationOptions: ({ navigation }) => ({
    header: null,
    title: navigation.state.routeName
  })
};

const BottomTabs = createBottomTabNavigator({
  All: todosScreen,
  Active: todosScreen,
  Complete: todosScreen
});

const AppNavigator = createStackNavigator(
  {
    Home: {
      screen: BottomTabs
    }
  },
  {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
        alignSelf: 'center',
        textAlign: 'center'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
        textAlign: 'center',
        alignSelf: 'center',
        flex: 1
      }
    }
  }
);

不幸的是，stacknavigator仅在顶部显示白色背景，我猜标题的样式没有生效吗？我想知道是什么原因可以解决？

Answer 1

并非完全解决您的问题，更像是一种解决方法。我发现使用 react-native-elements 中的 Header 组件自定义标题更容易。只需为每个要在其上显示标题的屏幕添加组件。然后，您可以使用 header：null 将标题隐藏在堆栈导航器中，否则可能会出现两个标题。

以下示例：

visNetwork()

StackNavigator标头样式对createBottomTabNavigator屏幕无效吗？

1 个答案: