为什么我似乎无法使用 navigationOptions 更新状态栏背景/色调颜色答案

【问题标题】：Why can't I seem to update status bar background/tint colour using navigationOptions为什么我似乎无法使用 navigationOptions 更新状态栏背景/色调颜色
【发布时间】：2019-04-16 06:36:52
【问题描述】：

我正在尝试设置状态栏的背景和色调颜色，并在 iOS 模拟器上对其进行调试。但是，似乎两者都没有得到应用。我想拥有它，以便状态栏看起来像是位于我的屏幕内容之上。如果有帮助，您可能希望跳到底部的 TL;DR。

我查看了以下 RN 文档：
https://reactnavigation.org/docs/en/headers.html
https://reactnavigation.org/docs/en/status-bar.html

我已经浏览了几个线程。但是，无论我尝试什么，我似乎都无法让状态栏外观按预期工作（参考下面的预期/实际结果）。

这里是所有可能相关的文件。

Screen 基类（所有屏幕都使用它作为其render 方法中的顶部元素）：

class Screen extends React.Component<Props> {
  render() {
    const { style, children } = this.props

    return (
      <SafeAreaView style={[styles.container, style]}>{children}</SafeAreaView>
    )
  }
}

export default Screen

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: color.neutralL3
  }
})

应用导航器：

const routeConfigMap = {
  Loading: { screen: LoadingScreen },
  /* other routes */
  TabNav: { screen: TabNavigator }
}

const switchConfig = {
  initialRouteName: 'Loading', 
  headerMode: 'none'
}

const AppNavigator = createSwitchNavigator(routeConfigMap, switchConfig)

标签导航器：

const routeConfigMap = {
  /* other routes */
  HomeNav: {
    screen: HomeNavigator,
    /* customNavigationOptions is a highly convoluded function that I will leave out here */
    navigationOptions: customNavigationOptions(
      'Home',
      'ios-person',
      [],
      ({ screenProps: { newFollowerCount } }) => ({
        badgeNumber: newFollowerCount
      })
    )
  }
  /* other routes */
}

const drawConfig = {
  initialRouteName: 'HomeNav',
  headerMode: 'none',
  tabBarOptions: {
    activeTintColor: color.secondary
  }
}

const TabNavigator = createBottomTabNavigator(routeConfigMap, drawConfig)

主页导航器：

const routeConfigMap = {
  Home: { screen: HomeScreen },
  /* other routes */
}

const stackConfig: StackNavigatorConfig = {
  initialRouteName: 'Home',
  headerMode: 'none',
  /* Have tried setting navigationOptions here but appearance not applied as intended */
  /*navigationOptions: {
    title: 'Home', 
    headerStyle: {
      backgroundColor: '#265CA7',
    },
    headerTintColor: '#ffffff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }*/
}

const HomeNavigator = createStackNavigator(routeConfigMap, stackConfig)

主屏幕：

class HomeScreen extends React.Component<Props> {
  // Have tried setting navigationOptions as a static field,
  // but the appearance is not applied as intended.
  /*static navigationOptions = {
    title: 'Home', 
    headerStyle: {
      backgroundColor: '#265CA7',
    },
    headerTintColor: '#ffffff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };*/

  get content() {
    /* returns content for the screen */
  }

  render() {
    return (
      <Screen>
        // Have tried the following but again,
        // the appearance is not applied as intended.
        <StatusBar
          barStyle="light-content" 
          backgroundColor="#265CA7"
        />
        {this.content}
      </Screen>
    )
  }
}

TL;DR

预期/实际：

我希望状态栏的背景颜色更新为“#265CA7”（蓝色），字体颜色（运营商、时间、电池表）为白色。这个想法是让它看起来像状态栏位于我的内容上，如下所示：

但是，实际结果表明这些都没有得到应用。要么状态栏外观没有变化，要么在浅灰色背景上以白色字体呈现，就像这样（如果你看的足够近，你可以看到微弱的白色文字）：

如何让外观按预期工作？

【问题讨论】：

标签： react-native

【解决方案1】：

我设法通过修改我的 Screen 类来在 SafeAreaView 中放置一个状态栏占位符来解决它，正如这个答案中所建议的那样：https://stackoverflow.com/a/54354327

【讨论】：