[英]React Native - Expo - Text string must be rendered within a <Text>
Hello I am having an issue in mobile testing with react native expo "Text string must be rendered within a "您好,我在使用本机 expo 进行移动测试时遇到问题“文本字符串必须在 a 中呈现”
Trying and catching i identify that my issue is in this grid return, i am building a tic-tac-toe game but in web testing run fine but not in mobile.尝试并发现我的问题出在此网格返回中,我正在构建一个井字游戏,但在 web 中测试运行良好,但在移动设备中却没有。
I suppose that my wrong code is in the double maping but i am not sure about that, the other way is use an array of 9 positions我想我的错误代码在双重映射中,但我不确定,另一种方法是使用 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',
}
})
This problem can be a bit difficult to see, but sometimes it can help to format the code (eg with prettier
).这个问题可能有点难看,但有时它可以帮助格式化代码(例如使用
prettier
)。
The problem here is an extra space just before the {row.map...
:这里的问题是在
{row.map...
之前有一个额外的空间:
return (
<View style={{flexDirection: "row"}}> {row.map((item, index) => {
index2 = index
If you format the code it will be more obvious:如果你格式化代码,它会更明显:
<View style={{ flexDirection: 'row' }}>
{' '}
{row.map((item, index) => {
index2 = index;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.