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

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

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>