尝试制作一个简单的react-native-app时无法显示警告

Question

我正在尝试制作一个井字游戏，作为一个简单的本机应用程序。但是我无法使警报起作用，同时试图使游戏在获得“ 3连胜”时警告玩家1或2获胜。有人可以看到我做错了事还是可以给我一些建议。

一切正常，例如Alert和this.initializeGame（）;在我想获得胜利者的部分下。

[如果有人会知道是否有一种更好的做法来命名变量const或让im也想知道。 ：）

谢谢！

这里是代码：

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Alert, } from 'react-native';
import { MaterialCommunityIcons as Icon } from 'react-native-vector-icons'

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      gameState: [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
      ],
      currentPlayer: 1,
    }
  }

  componentDidMount() {
    this.initializeGame();
  }

  initializeGame = () => {
    this.setState({gameState:
      [
        [0, 0, 0],
        [0, 0, 0],
        [0, 0, 0]
      ],
      currentPlayer: 1,
    });
  }

  getWinner = () => {
    const NUM_TILES = 3;
    var arr = this.state.gameState;
    var sum;
    var i = 0;

//rows
  for (i; 1 < NUM_TILES; i++) {
      sum = arr[i][0] + arr[i][1] + arr[i][2];
      if (sum == 3) { return 1; }
      else if (sum == -3) { return -1; }
    }
//colums
  for (i; 1 < NUM_TILES; i++) {
      sum = arr[0][i] + arr[1][i] + arr[2][i];
      if (sum == 3) { return 1; }
      else if (sum == -3) { return -1; }
    }
  //diagonals
  sum = arr[0][0] + arr[1][1] + arr[2][2];
  if (sum == 3) { return 1; }
  else if (sum == -3) { return -1; } 

  sum = arr[2][0] + arr[1][1] + arr[0][2];
  if (sum == 3) { return 1; }
  else if (sum == -3) { return -1; }

  //If no winners
  return 0;
  }

  onTilePress = (row, col) => {
     //makes sure that the tiles dont change
    var value = this.state.gameState[row][col];
    if (value !== 0) { return; }

    //sets currant player
    var currentPlayer = this.state.currentPlayer;

    //sets the correct tile
    var arr = this.state.gameState.slice();
    arr [row][col] = currentPlayer;
    this.setState({gameState: arr});

    //switches player
    var nextPlayer = (currentPlayer == 1) ? -1 : 1;
    this.setState({currentPlayer: nextPlayer});

    //check for winners
    var winner = this.getWinner();
    if (winner == 1) {
      Alert.alert("Player 1 is the winner");
      this.initializeGame();
    } else if (winner == -1) {
      Alert.alert("Player 2 is the winner");
      this.initializeGame();
    }
  }

  renderIcon = (row, col) => {
    var value = this.state.gameState[row][col];
    switch(value)
    {
      case 1: return <Icon name="close" style={styles.tileX} />;
      case -1: return <Icon name="circle-outline" style={styles.tileO} />;
      default: return <View />;
    }
  }

  render() {
    return (
      <View style={styles.container}>     
      <View style={{flexDirection: "row"}}>
        <TouchableOpacity onPress={() => this.onTilePress(0, 0)} style={[styles.tile, { borderLeftWidth: 0, borderTopWidth: 0 }]}>
          {this.renderIcon(0, 0)}
        </TouchableOpacity>    
        <TouchableOpacity onPress={() => this.onTilePress(0, 1)} style={[styles.tile, { borderTopWidth: 0, }]}>
          {this.renderIcon(0, 1)}
        </TouchableOpacity>    
        <TouchableOpacity onPress={() => this.onTilePress(0, 2)} style={[styles.tile, { borderRightWidth: 0, borderTopWidth: 0 }]}>
          {this.renderIcon(0, 2)}
      </TouchableOpacity> 
      </View>

      <View style={{flexDirection: "row"}}>
        <TouchableOpacity onPress={() => this.onTilePress(1, 0)} style={[styles.tile, { borderLeftWidth: 0 }]}>
          {this.renderIcon(1, 0)}
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this.onTilePress(1, 1)} style={[styles.tile, { }]}>
          {this.renderIcon(1, 1)}
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this.onTilePress(1, 2)} style={[styles.tile, { borderRightWidth: 0 }]}>
          {this.renderIcon(1, 2)}
        </TouchableOpacity>
      </View>  

      <View style={{flexDirection: "row"}}>
        <TouchableOpacity onPress={() => this.onTilePress(2, 0)} style={[styles.tile, { borderBottomWidth: 0, borderLeftWidth: 0, }]}>
          {this.renderIcon(2, 0)}
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this.onTilePress(2, 1)} style={[styles.tile, { borderBottomWidth: 0, }]}>
          {this.renderIcon(2, 1)}
        </TouchableOpacity>
        <TouchableOpacity onPress={() => this.onTilePress(2, 2)} style={[styles.tile, { borderBottomWidth: 0, borderRightWidth: 0,
        }]}>
          {this.renderIcon(2, 2)}
        </TouchableOpacity>
      </View>  

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  tile: { 
    borderWidth: 10,
    width: 100,
    height: 100,
  },
  tileX: {
    color: "red",
    fontSize: 60,
  },
  tileO: {
    color: "green",
    fontSize: 60,
  }
});

Answer 1

看起来您所做的一切都很好，除了getWinner()函数的算法。此函数有很多问题，例如，您的for循环结束条件为1 < NUM_OF_TILES，其中NUM_OF_TILES为3。此外，当从行移动到列时，还必须将i初始化为0，因为[ C0]在第一个for循环的末尾已经是2。

我已为您更新了此功能，如下：

i

您可以在以下位置找到工作代码：

  getWinner = () => {
    const NUM_TILES = 3;
    var arr = this.state.gameState;
    var sum;
    var i = 0;

    //rows
    for (i = 0; i < NUM_TILES; i++) {
      sum = arr[i][0] + arr[i][1] + arr[i][2];
      if (sum == 3) {
        return 1;
      } else if (sum == -3) {
        return -1;
      }
    }

    //colums
    for (i = 0; i < NUM_TILES; i++) {
      sum = arr[0][i] + arr[1][i] + arr[2][i];
      if (sum == 3) {
        return 1;
      } else if (sum == -3) {
        return -1;
      }
    }
    //diagonals
    sum = arr[0][0] + arr[1][1] + arr[2][2];
    if (sum == 3) {
      return 1;
    } else if (sum == -3) {
      return -1;
    }

    sum = arr[2][0] + arr[1][1] + arr[0][2];
    if (sum == 3) {
      return 1;
    } else if (sum == -3) {
      return -1;
    }

    //If no winners
    return 0;
  };

我尚未测试所有用例，但希望它能使您朝正确的方向发展。