如何修改React Native(Native Base)中未选中复选框的背景色

开发者阿泽

2026-8-5

解决Native Base未选中复选框背景色无法修改的问题

针对你使用的react-native: 0.68.5和native-base: 3.0.3版本，以下两种方法可以修改未选中状态复选框的背景色：

方法一：单个Checkbox自定义样式

直接通过_boxStyle属性覆盖未选中状态的背景样式，这是最直接的局部修改方式：

import { Checkbox } from 'native-base';

<Checkbox
  value="option1"
  // 配置未选中状态的背景和边框
  _boxStyle={{
    bg: "#e0e0e0", // 替换成你需要的背景色
    borderColor: "#999" // 可选，调整边框颜色
  }}
  // 可选：配置选中状态的样式
  _checkedBoxStyle={{
    bg: "#2196f3"
  }}
/>

方法二：全局修改所有Checkbox样式

如果需要统一应用到整个项目的Checkbox，可以通过扩展Native Base主题实现：

import { NativeBaseProvider, extendTheme } from 'native-base';
import AppContent from './AppContent'; // 你的应用核心组件

// 扩展自定义主题
const customTheme = extendTheme({
  components: {
    Checkbox: {
      baseStyle: {
        _box: {
          bg: "#e0e0e0", // 全局未选中背景色
          borderColor: "#999"
        },
        _checkedBox: {
          bg: "#2196f3" // 全局选中背景色
        }
      }
    }
  }
});

export default function App() {
  return (
    <NativeBaseProvider theme={customTheme}>
      <AppContent />
    </NativeBaseProvider>
  );
}