Стиль заголовка 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

Не совсем решение вашей проблемы, больше похоже на обходной путь.Мне было проще настроить заголовок с помощью компонента Header из act-native-elements .Просто добавьте компонент для каждого экрана, на котором вы хотите заголовок.Затем вы скрываете заголовок в стековом навигаторе, используя 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>