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

}

这是Tab导航器代码：

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

尝试一下：

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

并删除您的SettingsScreen类中的这个：

static navigationOptions = {
    header: null,
  };

Answer 2

最直接的方法是将header上的static navigationOptions设置为null。我已经从React Navigation GitHub项目下载了Playground example并进行了测试。标头不见了。

您的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 3

尝试通过这种方式

pip install

默认的React Native头文件不会在屏幕上消失

3 个答案: