React Native 0.65搭配react-native-router-flux v4.3.0如何修改默认背景色

你遇到的问题是RN 0.65版本默认引入react-native-screens后，react-native-router-flux v4.3.0默认启用原生屏幕容器导致的，该原生容器的默认背景色为#f2f2f2，优先级高于之前配置的JS层样式，导致原有配置失效。

方案1：直接禁用原生屏幕容器（最兼容老项目） #

在Router组件上添加useNativeScreens={false}属性，即可回退到0.60版本的JS层导航容器，你之前写的cardStyle全局配置可以直接生效：

const RouterComponent = () => {
  const sceneConfig = {
    cardStyle: {
      backgroundColor: 'white',
    },
  };

  return (
    <Router 
      useNativeScreens={false}
      {...sceneConfig}
    />
    [...]
    </Router>
  )
}

改完后清理构建缓存重启项目即可。

方案2：全局修改原生屏幕默认背景色 #

如果需要保留react-native-screens的性能优化，可在项目入口文件（一般为index.js）的最顶部添加如下配置，全局修改所有原生屏幕的默认背景色：

import { enableScreens, Screen } from 'react-native-screens';
enableScreens();

// 全局覆盖Screen组件默认背景色
Screen.defaultProps = {
  ...Screen.defaultProps,
  backgroundColor: 'white'
};

该方案不需要修改原有Router或Scene的配置，全局生效。

方案3：给单个Scene设置独立背景色 #

如果需要给不同页面设置不同背景色，给对应Scene添加cardStyle属性即可，样式会作用在原生屏幕容器上：

<Scene
  title={'Profile'}
  renderTitle={() => <View />}
  cardStyle={{backgroundColor: 'red'}}
  key="profile"
  hideNavBar
  icon={TabIcon}
  iconName="account-circle-outline"
  back={false}
  component={Profile}
/>

以上方案修改后，建议执行npx react-native start --reset-cache清理Metro缓存后重新构建应用，避免缓存导致样式不生效。

内容的提问来源于stack exchange，提问作者owiewio