Заголовок React Native по умолчанию не исчезает на экране

Question

У меня есть экран, который известен как Settings Screen, и я не хочу, чтобы заголовок React Native по умолчанию присутствовал на этом экране, но он есть. Вот (применимый) код, который у меня есть для экрана на данный момент:

export default class SettingsScreen extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
        address: "",
      }
      this.getStore();
   }

  async getStore() {
    try {
      const secretsInCache = await AsyncStorage.getItem('data');
      const jsonData = JSON.parse(secretsInCache);
      this.setState({address: jsonData.base_info.address});
    } catch (e) {
      console.log(e);
    }
  }

  static navigationOptions = {
    header: null,
  };

  render() {
    return (
      <PageTemplate headerText='Settings' navBar='true' needsFocus='More'>
        <View style={{width: '100%', height: '100%', alignItems: 'center'}}>

          <HomeScreenContainer>

            <View style={styles.firstContainerSeperation}>
              <Text style={styles.firstContHeading}>Service Address:</Text>
              <Text style={styles.textInFirstBox}>{this.state.address}</Text>
            </View>

            <View style={styles.straightLine} />

          </HomeScreenContainer>

        </View>
      </PageTemplate>
    );
  }

}

А вот код навигатора вкладок:

const SettingsStack = createStackNavigator({
  Settings: {
    screen: SettingsScreen,
    headerMode: 'none',
    mode: 'modal'
  }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
});


const MoreStack = createStackNavigator({
  More: {
    screen: MoreScreen,
    mode: 'modal',
    headerMode: 'none',
  },
  SettingsStack
});

MoreStack.navigationOptions = {
  headerVisible: false,
  tabBarVisible: false,
  tabBarLabel: 'More',
  tabBarIcon: <TabBarIcon source={require('../assets/icons/more.png')}/>,
};

Как вы можете видеть, во многих местах я объявляю headerMode как null или none, но заголовок по умолчанию все еще появляется?

Как избавиться от стандартного заголовка React Native на экране настроек?

Answer 1

Самый простой способ - установить header на static navigationOptions на null.Я скачал Пример игровой площадки из проекта React Navigation GitHub и протестировал именно это.Заголовок исчез.

Ваш код навигации Tab должен выглядеть примерно так:

const SettingsStack = createStackNavigator({
  Settings: {
    screen: SettingsScreen
  },
  More: {
    screen: MoreScreen
  },
}, {});

MoreStack.navigationOptions = {
  headerVisible: false,
  tabBarVisible: false,
  tabBarLabel: 'More',
  tabBarIcon: <TabBarIcon source={require('../assets/icons/more.png')}/>,
};

Убедитесь, что у вас нет проблем со сборкой в ​​реальном времени, когда вы нажимаете Ctrl + S.

Answer 2

попробуй сделать таким образом

`const SettingsStack = createStackNavigator({
  Settings: { screen: SettingsScreen }
  }, {
    navigationOptions: {
      header: null
    }
  })`

`const MoreStack = createStackNavigator({
  More: { screen: MoreScreen }
  }, {
    navigationOptions: {
      header: null
    }
  })`

`const MainStack = creatSwitchNavigatore({
    SettingsStack : SettingsStack, 
    MoreStack : MoreStack 
})

Answer 3

Попробуйте это:

const SettingsStack = createStackNavigator({
  Settings: {
    screen: SettingsScreen,
    navigationOptions: {
        title: ' ',
        headerBackTitle: ' ',
        headerStyle: {
          elevation: 0,
          borderBottomWidth: 0,
          backgroundColor: colors.white
        }
      }
   }
})

И удалите это из вашего SettingsScreen класса:

static navigationOptions = {
    header: null,
  };