React Native Expo项目：TextInput在Expo Go显示异常求助

核心问题原因 #

在React Native原生环境（Expo Go）中，TextInput组件不能嵌套在Text组件内部——Web端因DOM特性允许这种嵌套，但原生RN会解析异常，直接导致TextInput无法交互，同时引发样式渲染混乱（出现红/蓝色背景）。

修复步骤 #

1. 重构TextField组件结构

将Text（标签文本）和TextInput拆分开，用View作为容器包裹两者，彻底避免嵌套问题，同时修正placeHolder的拼写错误（应为placeholder）：

修改UI.js中的TextField组件：

import { Text, TextInput, View } from 'react-native';
import { textField } from '../utils/stylesheet';

export function TextField({ text, value, update }) {
    return (
        <View style={textField.container}>
            <Text style={textField.label}>{text}:</Text>
            <TextInput 
                style={textField.input} 
                value={value} 
                onChangeText={update} 
                placeholder='...'
            />
        </View>
    );
}

2. 更新样式文件（stylesheet.js）

添加容器样式，优化标签与输入框的布局，可按需移除不必要的背景色：

import { StyleSheet } from 'react-native';

export const textField = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        marginVertical: 8,
        gap: 8
    },
    label: {
        fontSize: 15,
        color: 'rgb(80, 80, 80)',
        // 如需保留红色背景可取消注释
        // backgroundColor: 'red'
    },
    input: {
        flex: 1,
        fontSize: 17,
        color: 'black',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 4,
        padding: 8,
        // 如需保留蓝色背景可取消注释
        // backgroundColor: 'blue'
    }
});

3. 验证数据上下文初始值

确保DataContext中的data初始值包含char对象，避免因data为undefined导致组件不渲染：

// 示例DataContext初始化代码
const DataContext = createContext({
    data: { char: {} },
    setData: () => {}
});

为什么Web端正常？ #

Web端的React Native会将RN组件转换为DOM元素，Text对应<span>、TextInput对应<input>，DOM允许<input>嵌套在<span>中；但原生RN的Text组件是专门用于渲染文本的容器，不支持嵌套可交互组件，因此出现异常。

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