StackNavigator 标题样式对 createBottomTabNavigator 屏幕不起作用

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

不幸的是，堆栈导航器仅在顶部呈现白色背景，我想标题的样式没有生效？我想知道原因和解决方法是什么？

Answer 1

不完全是针对您问题的修复，更像是一种解决方法。我发现使用来自 react-native-elements 的 Header 组件自定义标头更容易。只需为要标题的每个屏幕添加组件即可。然后，使用 header： null 隐藏堆栈导航器上的标头，否则最终可能会得到两个标头。

示例如下：

<React.Fragment>
  <Header
    statusBarProps={{ barStyle: 'light-content' }}
    barStyle="light-content"
    leftComponent={
      <SimpleIcon
        name="menu"
        color="#34495e"
        size={20}
      />
    }
    centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
    containerStyle={{
      backgroundColor: 'white',
      justifyContent: 'space-around',
    }}
  />
</React.Fragment>