react-native - 默认 React Native 标头不会在屏幕上消失

Question

我有一个称为 the 的屏幕，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 声明为nullor none，但仍然弹出默认标题？

如何摆脱设置屏幕中的默认 React Native 标头？

标签： react-nativereact-navigation

Answer 1

尝试这样做

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