React Native - Expo - 文本字符串必须在 <Text> 内呈现

Question

您好，我在使用 React Native Expo 进行移动测试时遇到问题“文本字符串必须在“

尝试发现我的问题出在这个网格中 return，我正在构建一个井字游戏，但在网络测试中运行很好，但在移动设备中却不行。

我想我的错误代码是在双重映射中，但我不确定，另一种方法是使用 9 个位置的数组

 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, index ) => { 
                 index1 = index
                return ( 
                     <View style={{flexDirection: "row"}}> {row.map((item, index) => {
                             index2 = index
                            return (
                              <Sign endGame={endGame} row={index1} col={index2} item={item}  handleClick={(dat1,dat2)=> handleClick(dat1,dat2)} xorO={xorO} />
                            )
                        })}
                   
                    </View>
                )
            })}
              
        </View>
   
        </>

网格

import React, {useState,useEffect} from 'react'
import {View, StyleSheet, Text} from 'react-native'
import Sign from '../sign'

const Grid = () => {
    const row1 = ["","",""]
    const row2 = ["","",""]
    const row3 = ["","",""]
    const [xorO, setXorO] = useState(true)
    const [board, setBoard] = useState([row1,row2,row3])
    const [endGame, setEndGame] = useState(false);
    const [winner, setWinner] = useState(null);
  
    const handleClick = (index1, index2) => {
        let letter = xorO ? 'X' : 'O'
        let newBoard = [...board]
        newBoard[index1][index2] = letter
        setBoard(newBoard)
        setXorO(!xorO)
    }
    let shift = xorO ? 'X' : 'O'
    let index1=null, index2=null

  useEffect(()=>{
      if(board[0][0] === 'X' && board[0][1] === 'X' && board[0][2] === 'X'){
           setEndGame(true)
           setWinner('X')
      }
        if(board[1][0] === 'X' && board[1][1] === 'X' && board[1][2] === 'X'){
            setEndGame(true)
           setWinner('X')
        }
        if(board[2][0] === 'X' && board[2][1] === 'X' && board[2][2] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][0] === 'X' && board[1][0] === 'X' && board[2][0] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][1] === 'X' && board[1][1] === 'X' && board[2][1] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][2] === 'X' && board[1][2] === 'X' && board[2][2] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][0] === 'X' && board[1][1] === 'X' && board[2][2] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][2] === 'X' && board[1][1] === 'X' && board[2][0] === 'X'){
            setEndGame(true)
           setWinner('X')
        }
        if(board[0][0] === 'O' && board[0][1] === 'O' && board[0][2] === 'O'){
            setEndGame(true)
            setWinner('O')
        }
          if(board[1][0] === 'O' && board[1][1] === 'O' && board[1][2] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[2][0] === 'O' && board[2][1] === 'O' && board[2][2] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][0] === 'O' && board[1][0] === 'O' && board[2][0] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][1] === 'O' && board[1][1] === 'O' && board[2][1] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][2] === 'O' && board[1][2] === 'O' && board[2][2] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][0] === 'O' && board[1][1] === 'O' && board[2][2] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][2] === 'O' && board[1][1] === 'O' && board[2][0] === 'O'){
            setEndGame(true)
            setWinner('O')
          }

  },[board])
    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, index ) => { 
                 index1 = index
                return ( 
                     <View style={{flexDirection: "row"}}> {row.map((item, index) => {
                             index2 = index
                            return (
                              <Sign endGame={endGame} row={index1} col={index2} item={item}  handleClick={(dat1,dat2)=> handleClick(dat1,dat2)} xorO={xorO} />
                            )
                        })}
                   
                    </View>
                )
            })}
              
        </View>
   
        </>
    )
}

export default Grid

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        
    },
    text: {
        fontSize: 30,
        color: 'red'
    }
       
});

标志

import React from 'react'
import { Text, View, StyleSheet, TouchableHighlight } from 'react-native'

 const Sign = (props) => {
     const { row,col,item,handleClick, endGame } = props
    return (
        <>
        {!endGame ?
        <TouchableHighlight 
  activeOpacity={0.6}
  onPress={() =>{handleClick(row,col)}}
   underlayColor= "rgba(255,255,255,0.0 1)"
>
  <View style={styles.grid}>
        <Text style={styles.text}>{item}</Text>
          </View>
</TouchableHighlight>:
 <View style={styles.grid}>
        <Text style={styles.text}>{item}</Text>
          </View>}
       </>
    )
}

export default Sign

const styles = StyleSheet.create({
grid :{
       
        
       borderRadius: 10,
       borderWidth: 1,
 
       margin: 5,
       borderColor: '#fff',
       padding: 10,
       shadowColor: '#000',
       shadowOffset: {
           width: 0,
           height: 2   
       },
       shadowOpacity: 0.25,
       shadowRadius: 3.84,
       elevation: 5,      
       width: 100,
       height: 100,
   },
   text: {
    fontSize: 40,
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
}
})

Answer 1

这个问题可能有点难看，但有时它可以帮助格式化代码（例如 prettier）。

这里的问题是 {row.map...:

之前的额外 space

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

如果格式化代码会更明显：

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

React Native - Expo - 文本字符串必须在 <Text> 内呈现

React Native - Expo - Text string must be rendered within a <Text>

javascript

react-native

expo

网格

标志