Question

我打算有一个7x7的瓷砖网格。我尝试使每个瓦片宽30高。结果是一个比它高的矩形。我想要一个正方形。

Board.js

    export default class Board extends React.Component {
  render() {
    if (!this.props.rows) {
      return <View></View>
    }

    let rows = this.props.rows;
    return(
    <View style={styles.container}>
      <Row tiles={rows[0]}/>
      <Row tiles={rows[1]}/>
      <Row tiles={rows[2]}/>
      <Row tiles={rows[3]}/>
      <Row tiles={rows[4]}/>
      <Row tiles={rows[5]}/>
      <Row tiles={rows[6]}/>
    </View>);
  }
}

const styles = StyleSheet.create({
  container: {
    height: 210,
    flex: 1,
    flexDirection: 'row',
    width: 210,
    backgroundColor: '#434f4f',
    color: '#000000',
  },
});

Row.js



export default class Row extends React.Component {
  render() {
    let tiles = this.props.tiles;

    return(
    <View style={styles.container}>
      <TileView tile={tiles[0]}/>
      <TileView tile={tiles[1]}/>
      <TileView tile={tiles[2]}/>
      <TileView tile={tiles[3]}/>
      <TileView tile={tiles[4]}/>
      <TileView tile={tiles[5]}/>
      <TileView tile={tiles[6]}/>
    </View>);
  }
}

const styles = StyleSheet.create({
  container: {
    height: 30,
    width: 210,
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#434f4f',
    color: '#000000',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

TileView:

    export default class TileView extends React.Component {
      render() {
        // return <View></View>;
        // console.log(this.props.data);
        const kind = this.props.tile[0];
        const wall = this.props.tile[1];
        const team = this.props.tile[2];
        console.log("Kind" + kind);
        console.log("Wall" + wall);
        console.log("Team" + team);
        let tileStyle = "teamNone";
        if (team === "o") {
          tileStyle = "teamO";
        } else if (team === "x") {
          tileStyle = "teamX";
        }
        console.log("The style" + tileStyle);
        return <View style="teamNone"><Text>T</Text></View>
      }
    }


        const styles = StyleSheet.create({
      teamX: {
        color: "#77d4d4",
        width: 30,
        height: 30
      },
      teamO: {
        color: "#9ed36c",
        width: 30,
        height: 30
      },
      teamNone: {
        color: "red",
        width: 30,
        height: 30
      }
       });

我的主应用

    render() {
    if (!this.state) {
      return <View></View>
    }

    const {playerId, yourTurn, opponentTurn, finished} = this.state;

    const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={"foo" + index}>Override{item}</Text>

    if (this.state.table) {
      let table = this.state.table;
      console.log("Biscuit");
      console.log(table.board);
      return <View style={styles.boardContainer}>
        <Board rows={table.board}/>
      </View>
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#434f4f',
    color: '#000000',
    alignItems: 'center',
    justifyContent: 'center',
  },

  boardContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#434f4f',
    color: '#000000',
    alignItems: 'center',
    justifyContent: 'center',
  },

  buttons: {
    height: 100
  },

  button: {
    color: '#cccccc'
  },

  list: {
    flex: 1
  },

  playerId: {
    marginTop: 100,
    color: "white",
    height: 40
  }
});

如何正确设置TileViews，Rows和Board的高度和宽度，以使整个Board为正方形，而每个tile都呈正方形？

谢谢！好答案。如何使内容居中？我尝试运行将Text更改为T并获取

的代码

Answer 1

请记住，并非所有设备的宽度和高度都相同。我建议您使用react-native的Dimensions组件使您的设计更具响应性。我为你做了一个世博小吃 click here for see it in action

import { Dimensions } from "react-native"; //in ALL your self created components

// you should declare a constant for both dimensions on the top of the code
const {
  width: MAX_WIDTH,
  height: MAX_HEIGHT,
} = Dimensions.get('window');

从您的MainApp.js样式中更改以下属性

 boardContainer: {
    flex:1,
    height: MAX_HEIGHT,
    width: MAX_WIDTH,
    flexDirection: 'column',
    backgroundColor: '#434f4f',
    alignItems: 'center',
    justifyContent: 'center',
  },

从Board.js

更改以下属性样式

const styles = StyleSheet.create({
    height: MAX_WIDTH,
    width: MAX_WIDTH,
    flexDirection: 'column',          
    backgroundColor: "white",//'#434f4f', backgroundcolor here doesnt matter
    alignItems: 'center',
    justifyContent: 'center',
    padding:10,
  },
});

从您的Row.js

更改以下属性样式

 container: {
  height: ((MAX_WIDTH-20)/7),
  width: (MAX_WIDTH-20),
  flexDirection: 'row',
  backgroundColor: "blue", //'#434f4f',backgroundcolor here doesnt matter
  alignItems: 'center',
  justifyContent: 'space-between', 
 }

从您的TileView.js

更改以下属性样式

teamNone: {
 height:((MAX_WIDTH-22)/7)),
 width: ((MAX_WIDTH-22)/7),
 backgroundColor: "red",
 alignSelf: 'center',
 alignItems: 'center',
 justifyContent: 'center',
 padding:10,
}

如何在React Native中设置确切的视图高度以获得Square网格？

1 个答案: