React Native使用TextInput时报input组件配置回调为undefined错误如何解决？

报错产生原因 #

• 核心原因为代码未从react-native包中正确导入用到的内置组件，包括代码中出现的TextInput、View、StyleSheet、StatusBar均需提前导入才能使用
• 未导入TextInput时，运行环境会将该标签识别为Web端原生的小写input组件，而React Native不支持原生Web标签，因此触发配置读取失败的报错，同时附带组件首字母需大写的通用提示

解决方法 #

在代码顶部添加对应组件的导入语句即可，修正后的完整代码如下：

import { View, TextInput, StyleSheet, StatusBar } from 'react-native';

export default function App() {
    return(
        <View style={styles.container}>
            <View style={styles.header}>
                <TextInput />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: StatusBar.currentHeight,
        backgroundColor: "#F7F7F7FF",
        paddingTop: StatusBar.currentHeight,
        alignItems: "center",
        justifyContent: "center"
    },
    header: {
        backgroundColor: "pink",
        padding: 20,
    },
});

其他排查场景 #

如果添加导入后仍有报错，检查以下两点：

• 导入的组件名拼写是否正确，TextInput为首字母大写驼峰格式，拼写错误会导致识别失败
• 确认导入来源为react-native包，不要错误从react或其他第三方包导入该组件

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