React native StackNavigator标题样式对CreateBoottomTabNavigator屏幕没有影响？

我想在stack navigator下呈现底部选项卡，这是我的代码：

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只在顶部呈现白色背景，我猜标题的样式没有生效？我想知道原因和解决方法是什么？

不完全是针对您的问题的解决方法，更像是一种解决方法。 我发现使用来自react原生元素的header组件定制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>