在 React Native 中渲染网格/数独板答案

【问题标题】：Rendering a Grid/Sudoku Board in React Native在 React Native 中渲染网格/数独板
【发布时间】：2021-05-29 08:47:41
【问题描述】：

我正在学习 React 本机并尝试编写数独应用程序，但我在显示网格/数独板时确实遇到了问题。

我尝试了几种方法，每种方法都会导致错误。我是一名 Python/C 程序员，我习惯于以 Python 方式呈现/显示事物。我不确定如何继续。

我也尝试过使用 CSS 设置样式，但由于这是一个数独板，我想将整个板保存/存储在一个地方

感谢任何和所有的帮助。

export default function App() {

  const [tileValue, setTileValue] = useState(0);

  const tileHandler = (enteredValue) => {
      setTileValue(enteredValue);
      console.log({enteredValue});
  };

  const [sudokuBoard, setSudokuBoard] = useState([]);

  let arr = [];

  for(let i = 0; i<9; i++) {
    arr[i] = []
  }

  for(let i = 0; i<9; i++) {
    for(let j = 0; j<9; j++) {
      arr[i][j] = {value: {y: i, x: j}}
    }
  }
  console.log(arr)
  return (
    <View style={styles.container}>
      <FlatList
        numColumns={9}
        data={arr}
        renderItem={( itemData ) => (
          <View>
            {itemData.map((item) => <Text>{item}</Text>)}
          </View>
        )}
      />
    </View>

  );
}

【问题讨论】：

标签： javascript css reactjs react-native

【解决方案1】：

您需要创建 9X9 状态

 const [state, setState] = useState<BoardState>([
        null,null,null,.....................,null
        null,null,null,.....................,null
        .
        .
        null,null,null,.....................,null
        
    ])

以这种方式创建状态将帮助您调试代码。假设您需要尝试某些输入，您可以手动添加它们。

那么你应该映射这个状态。由于您要与屏幕进行交互，我认为最好使用 Touchable opacity：

{state.map((cell, index) => {
                return (
                    <TouchableOpacity
                       // in certain situations disable it
                        disabled={disabled}
                       // you handle pressing
                        onPress={() => onCellPressed && onCellPressed(index)}
                        style={{
                            width: "11.1111%",
                            height: "11.1111%",
                            borderWidth: 1,
                            alignItems: "center",
                            justifyContent: "center"
                        }}
                        key={index}
                    >
                        
                    </TouchableOpacity>
                );
            })}

【讨论】：