使用react-native-paper的Checkbox组件时显示表情而非复选框的解决方法

使用react-native-paper的Checkbox组件时，出现了婴儿表情符号替代复选框的异常情况。

导入代码 #

import { Checkbox } from "react-native-paper";

使用代码 #

<Checkbox  
    status={isVisible?'checked':'unchecked'}
    onPress={()=>{
        setVisible(!isVisible);
    }}
/>

解决方案 #

• 升级react-native-paper版本：旧版本组件存在字体渲染bug，升级到最新稳定版：

  npm install react-native-paper@latest
  # yarn用户执行：
  yarn add react-native-paper@latest
  

• 确保Roboto字体正常加载：react-native-paper依赖Roboto字体，缺失会导致符号 fallback 到表情：
  1. 下载Roboto字体文件，放到项目assets/fonts目录下
  2. 在项目根目录的react-native.config.js中添加配置：

  module.exports = {
    assets: ['./assets/fonts/'],
  };
  

  3. 运行npx react-native link（RN版本<0.60），RN0.60+会自动完成链接
• 改用Checkbox.Item组件：该组件渲染逻辑更稳定，可替换原Checkbox使用：

  import { Checkbox } from 'react-native-paper';
  
  <Checkbox.Item
    label="自定义选项文本"
    status={isVisible ? 'checked' : 'unchecked'}
    onPress={() => setVisible(!isVisible)}
  />
  

• 清除项目缓存：缓存异常可能引发渲染问题，执行命令重置缓存：

  npx react-native start --reset-cache
  

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