使用react-native-community checkbox为何持续出现‘Element type is invalid’错误？

核心问题1：导入方式错误 #

@react-native-community/checkbox 组件采用命名导出而非默认导出，你当前使用的默认导入语法会导致CheckBox变量为undefined，这正是报错提示的核心原因。

核心问题2：组件命名冲突（潜在风险） #

你将自定义组件命名为Checkbox，和导入的组件名仅存在大小写差异，虽然JS是大小写敏感语言，但这种命名方式容易引发混淆，建议修改自定义组件名称。

修复后的代码 #

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
// 改为命名导入
import { CheckBox } from '@react-native-community/checkbox';

// 修改自定义组件名称，避免混淆
export default function CheckboxDemo() {
    const [state, setState] = useState({ react: false });
    return (
        <View>
            <CheckBox
                value={state.react}
                onValueChange={value =>
                    setState({
                        ...state,
                        react: value,
                    })
                }
            />
            <Text>React js</Text>
        </View>
    );
}

额外验证步骤 #

1. 确认已正确安装依赖：

   npm install @react-native-community/checkbox
   # 或使用yarn
   yarn add @react-native-community/checkbox
   

2. 若使用React Native 0.60+，无需手动link，自动link会处理依赖；低于0.60版本需执行react-native link @react-native-community/checkbox

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