Question

我正在尝试设置状态栏的背景和色调颜色，并在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
  }
})

AppNavigator：

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

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

const AppNavigator = createSwitchNavigator(routeConfigMap, switchConfig)

TabNavigator：

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)

HomeNavigator：

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”（蓝色），字体颜色（运营商，时间，电池电量表的字体）将变为白色。目的是使状态栏看起来像位于我的内容上，如下所示：

但是，实际结果表明这些方法没有得到应用。状态栏外观没有变化，或者状态栏是用白色字体呈现在浅灰色背景上，就像这样（如果看起来足够近，您会看到模糊的白色文本）：

如何使外观按预期工作？

Answer 1

I managed to solve it by modifying my Screen class to place a status bar placeholder within the SafeAreaView, as suggested in this answer: https://stackoverflow.com/a/54354327

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

1 个答案: