标头未与createBottomTabNavigator一起显示-React NAtive

Question

我正在创建一个带有两个屏幕的非常简单的标签导航。我想在每个屏幕顶部显示标题。我正在运行以下代码，但看不到任何标题。标头只是不出现。

我正在使用react-navigation@3.11.1，我尝试恢复到3.10.0甚至3.0.0，但仍然看不到标题。因此，我认为这不是反应导航中的错误。

更新：这是预期的行为。参见：https://github.com/react-navigation/react-navigation/issues/6149

import React, {Component} from 'react';
import { View, Text } from 'react-native';
import {  createAppContainer, createBottomTabNavigator } from 'react-navigation';

class MusicScreen extends Component {
  static navigationOptions = {
    title: 'Musiiic',
  };
  render() {
    return (
        <View >
            <Text>Music Screen</Text>
        </View>
    );
  }
}

class MoviesScreen extends Component {
  static navigationOptions = {
    headerTitle: 'Movies',
  };
  render() {
    return (
    <View>
        <Text>Movies Screen</Text>
    </View>
    );
  }
}

const MainNavigation = createBottomTabNavigator({
    Music : {
      screen: MusicScreen,
      navigationOptions: ({navigation}) => ({
        title: 'Music',
        headerTitle: <Text>MUSIICCCC</Text>,
      })
    },
    Movies : {
      screen: MoviesScreen,
      navigationOptions: {
        title: 'Movies',
      },
    },
  },
  {
    headerMode: 'screen',
    navigationOptions: {
      headerVisible: true,
    },
  }
);

export default createAppContainer(MainNavigation);

Answer 1

您可以尝试以下方法吗？

例如：

 ...
    ...
        class MusicScreen extends Component {
          static navigationOptions = {
           title: 'MUSIICCCC',
           headerStyle: {
            backgroundColor: '#f4511e',
           },
           headerTintColor: '#fff',
           headerTitleStyle: {
            fontWeight: 'bold',
           },
         };
          render() {
            return (
                <View >
                    <Text>Music Screen</Text>
                </View>
            );
          }
        }
    ...
    ...


const MainNavigation = createBottomTabNavigator({
    Music : MusicScreen,
    Movies MoviesScreen,
  },
  {
    initialRouteName: 'Music',

  }
);

export default createAppContainer(MainNavigation);

Answer 2

尝试通过清除所有标头数据来清理createBottomTabNavigator。

const MainNavigation = createBottomTabNavigator({
    Music : {screen: MusicScreen},
    Movies : {screen: MoviesScreen},
  }
);

分别向每个屏幕添加navigationOptions。

class MusicScreen extends Component {

  static navigationOptions = {
    title: 'Musiiic',
  };

  render() {
    return (
        <View >
            <Text>Music Screen</Text>
        </View>
    );
  }
}

class MoviesScreen extends Component {

  static navigationOptions = {
    title: 'Movies',
  };

  render() {
    return (
    <View>
        <Text>Movies Screen</Text>
    </View>
    );
  }
}

以下是一些文档[https://reactnavigation.org/docs/en/headers.html]

Answer 3

您可以尝试吗？

import React, {Component} from 'react';
import { View, Text } from 'react-native';
import {  createAppContainer, createBottomTabNavigator } from 'react-navigation';

class MusicScreen extends Component {
  render() {
    return (
        <View >
            <Text>Music Screen</Text>
        </View>
    );
  }
}

class MoviesScreen extends Component {
  render() {
    return (
    <View>
        <Text>Movies Screen</Text>
    </View>
    );
  }
}

const MainNavigation = createBottomTabNavigator({
    Music : {
      screen: MusicScreen,
      navigationOptions: {
        title: "Music"
      }
    },
    Movies : {
      screen: MoviesScreen,
      navigationOptions: {
        title: 'Movies',
      },
    },
  },
  {
    headerMode: 'screen'
  }
);

export default createAppContainer(MainNavigation);