React Native 深色模式支持

[zhiqingchen]

相关平台

React Native

使用框架: React

复现步骤

打开系统的深色模式
iOS statusbar无法显示，input的placeholder无法显示

期望结果

支持深色模式

实际结果

不支持深色模式

环境信息

👽 Taro v3.3.15


  Taro CLI 3.3.15 environment info:
    System:
      OS: macOS 12.0.1
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 15.12.0 - /usr/local/bin/node
      Yarn: 1.22.10 - ~/.nvm/versions/node/v15.12.0/bin/yarn
      npm: 7.6.3 - ~/.nvm/versions/node/v15.12.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.3.15 => 3.3.15
      @tarojs/components: 3.3.15 => 3.3.15
      @tarojs/mini-runner: 3.3.15 => 3.3.15
      @tarojs/react: 3.3.15 => 3.3.15
      @tarojs/runtime: 3.3.15 => 3.3.15
      @tarojs/taro: 3.3.15 => 3.3.15
      @tarojs/webpack-runner: 3.3.15 => 3.3.15
      babel-preset-taro: 3.3.15 => 3.3.15
      eslint-config-taro: 3.3.15 => 3.3.15
      react: ^17.0.2 => 17.0.2
      react-native: ^0.66.0 => 0.66.3
    npmGlobalPackages:
      typescript: 4.2.3

[zhiqingchen]

[zhiqingchen]

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/darkmode.html#%E5%BC%80%E5%90%AF-DarkMode
参考配置

[zhiqingchen]

ios 禁用深色模式

修改 ios/taroDemo/Info.plist

	<key>UIUserInterfaceStyle</key>
	<string>Light</string>

[zhiqingchen]

android 禁用深色模式

修改 android/app/src/main/res/values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

[zhiqingchen]

statusbar颜色可以自行控制，如下

      <StatusBar
        translucent
        backgroundColor="rgba(0, 0, 0, 0)"
        barStyle="dark-content"
      />