React Native注册页输入@触发Text需<Text>包裹错误，Expo运行崩溃如何解决？

问题根因 #

你代码中所有校验逻辑的合法返回分支里，空<View>标签中间存在肉眼不易识别的空格字符，这个空格属于文本节点。React Native 明确规定文本节点只能包裹在<Text>组件内，不能直接作为<View>的子元素。
比如validateEmail函数里的这段代码：

else {
    return (<View> </View>)
}

<View>和</View>中间的空格就是触发报错的核心原因：浏览器端对非法DOM结构容错性高，只会抛出警告不影响运行；而Expo Go的原生渲染层没有做兼容处理，触发该分支渲染时就会直接崩溃。你在输入@等字符时刚好会命中这些返回空View的分支，所以错误会在对应操作时触发。

修复方案 #

1. 全局排查所有空View的写法，把标签中间的空格完全删除，两种修改写法都可以：

// 修复前
return (<View> </View>)
// 修复后写法1
return (<View />)
// 修复后写法2
return (<View></View>)

需要修改的位置包括validateEmail、validateName、validatePassword、displayResult函数里所有返回空View的分支。
2. 可选优化：这种不需要渲染任何内容的分支，直接返回null比渲染空View性能更好，也能从根源上避免意外写空格导致的问题：

else {
    return null
}

内容的提问来源于stack exchange，提问作者Yu Su