React Native Expo报Text字符串需在<Text>内渲染错误井字棋移动端运行失败

开发者阿泽

2026-9-23

问题原因定位

你遇到的Text string must be rendered within a <Text>报错，核心是React Native和Web端React对JSX空白文本的处理逻辑不同：Web端会自动忽略标签之间的换行、空格产生的空白文本节点，但React Native会将这类空白节点识别为未被Text组件包裹的非法文本，直接抛出错误。
具体出错位置在Grid组件双重map遍历的代码段：

<View style={{flexDirection: "row"}}> {row.map((item, index) => {

View标签闭合后和map遍历的大括号之间有一个多余空格，这个空格就是导致报错的非法文本节点。

修复方案

1. 直接修复现有代码

只需要删除上述位置的多余空格，同时对其他潜在问题做修正即可：

// Grid组件return部分修改后
return (
  <>
    <View style={styles.container}>
      {!endGame ? <Text style={styles.text}>{shift} 's turn</Text> : 
      <Text style={styles.text}>Winner is {winner}</Text>}
      {board.map((row, index1) => { 
        return ( 
          // 删掉View后面的多余空格
          <View style={{flexDirection: "row"}}>{row.map((item, index2) => {
            return (
              <Sign 
                endGame={endGame} 
                row={index1} 
                col={index2} 
                item={item}  
                handleClick={(dat1,dat2)=> handleClick(dat1,dat2)} 
                xorO={xorO} 
              />
            )
          })}</View>
        )
      })}
    </View>
  </>
)

同时修正Sign组件中underlayColor的非法值，把"rgba(255,255,255,0.0 1)"改为"rgba(255,255,255,0)"，避免样式警告。