#javascript #react-native #expo
#язык JavaScript #реагировать-родной #Экспо
Вопрос:
Здравствуйте, у меня возникла проблема при мобильном тестировании с помощью react native expo «Текстовая строка должна быть отображена в пределах »
Пытаясь и ловя, я определяю, что моя проблема заключается в этом возврате сетки, я создаю игру в крестики-нолики, но в веб-тестировании все работает нормально, но не в мобильных устройствах.
Я предполагаю, что мой неправильный код находится в двойном отображении, но я не уверен в этом, другой способ-использовать массив из 9 позиций
return ( lt; gt; lt;View style={styles.container}gt; {!endGame ?lt;Text style={styles.text}gt;{shift} 's turnlt;/Textgt; : lt;Text style={styles.text}gt;Winner is {winner}lt;/Textgt;} {board.map((row, index ) =gt; { index1 = index return ( lt;View style={{flexDirection: "row"}}gt; {row.map((item, index) =gt; { index2 = index return ( lt;Sign endGame={endGame} row={index1} col={index2} item={item} handleClick={(dat1,dat2)=gt; handleClick(dat1,dat2)} xorO={xorO} /gt; ) })} lt;/Viewgt; ) })} lt;/Viewgt; lt;/gt; сетка
import React, {useState,useEffect} from 'react' import {View, StyleSheet, Text} from 'react-native' import Sign from '../sign' const Grid = () =gt; { 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) =gt; { 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(()=gt;{ if(board[0][0] === 'X' amp;amp; board[0][1] === 'X' amp;amp; board[0][2] === 'X'){ setEndGame(true) setWinner('X') } if(board[1][0] === 'X' amp;amp; board[1][1] === 'X' amp;amp; board[1][2] === 'X'){ setEndGame(true) setWinner('X') } if(board[2][0] === 'X' amp;amp; board[2][1] === 'X' amp;amp; board[2][2] === 'X'){ setEndGame(true) setWinner('X') } if(board[0][0] === 'X' amp;amp; board[1][0] === 'X' amp;amp; board[2][0] === 'X'){ setEndGame(true) setWinner('X') } if(board[0][1] === 'X' amp;amp; board[1][1] === 'X' amp;amp; board[2][1] === 'X'){ setEndGame(true) setWinner('X') } if(board[0][2] === 'X' amp;amp; board[1][2] === 'X' amp;amp; board[2][2] === 'X'){ setEndGame(true) setWinner('X') } if(board[0][0] === 'X' amp;amp; board[1][1] === 'X' amp;amp; board[2][2] === 'X'){ setEndGame(true) setWinner('X') } if(board[0][2] === 'X' amp;amp; board[1][1] === 'X' amp;amp; board[2][0] === 'X'){ setEndGame(true) setWinner('X') } if(board[0][0] === 'O' amp;amp; board[0][1] === 'O' amp;amp; board[0][2] === 'O'){ setEndGame(true) setWinner('O') } if(board[1][0] === 'O' amp;amp; board[1][1] === 'O' amp;amp; board[1][2] === 'O'){ setEndGame(true) setWinner('O') } if(board[2][0] === 'O' amp;amp; board[2][1] === 'O' amp;amp; board[2][2] === 'O'){ setEndGame(true) setWinner('O') } if(board[0][0] === 'O' amp;amp; board[1][0] === 'O' amp;amp; board[2][0] === 'O'){ setEndGame(true) setWinner('O') } if(board[0][1] === 'O' amp;amp; board[1][1] === 'O' amp;amp; board[2][1] === 'O'){ setEndGame(true) setWinner('O') } if(board[0][2] === 'O' amp;amp; board[1][2] === 'O' amp;amp; board[2][2] === 'O'){ setEndGame(true) setWinner('O') } if(board[0][0] === 'O' amp;amp; board[1][1] === 'O' amp;amp; board[2][2] === 'O'){ setEndGame(true) setWinner('O') } if(board[0][2] === 'O' amp;amp; board[1][1] === 'O' amp;amp; board[2][0] === 'O'){ setEndGame(true) setWinner('O') } },[board]) return ( lt; gt; lt;View style={styles.container}gt; {!endGame ?lt;Text style={styles.text}gt;{shift} 's turnlt;/Textgt; : lt;Text style={styles.text}gt;Winner is {winner}lt;/Textgt;} {board.map((row, index ) =gt; { index1 = index return ( lt;View style={{flexDirection: "row"}}gt; {row.map((item, index) =gt; { index2 = index return ( lt;Sign endGame={endGame} row={index1} col={index2} item={item} handleClick={(dat1,dat2)=gt; handleClick(dat1,dat2)} xorO={xorO} /gt; ) })} lt;/Viewgt; ) })} lt;/Viewgt; lt;/gt; ) } 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) =gt; { const { row,col,item,handleClick, endGame } = props return ( lt;gt; {!endGame ? lt;TouchableHighlight activeOpacity={0.6} onPress={() =gt;{handleClick(row,col)}} underlayColor= "rgba(255,255,255,0.0 1)" gt; lt;View style={styles.grid}gt; lt;Text style={styles.text}gt;{item}lt;/Textgt; lt;/Viewgt; lt;/TouchableHighlightgt;: lt;View style={styles.grid}gt; lt;Text style={styles.text}gt;{item}lt;/Textgt; lt;/Viewgt;} lt;/gt; ) } 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', } }) Ответ №1:
Эту проблему может быть немного сложно увидеть, но иногда это может помочь отформатировать код (например, с prettier помощью ).
Проблема здесь в дополнительном пространстве непосредственно перед {row.map... :
return ( lt;View style={{flexDirection: "row"}}gt; {row.map((item, index) =gt; { index2 = index Если вы отформатируете код, это будет более очевидно:
lt;View style={{ flexDirection: 'row' }}gt; {' '} {row.map((item, index) =gt; { index2 = index;