如何在react native中设置视图的确切高度以获得正方形网格?

我打算用7x7网格的瓷砖。我试着把每块瓷砖做30宽30高。结果是一个比它高的矩形宽。我想要一个正方形。

木板。JS/P>

export default class board extends react.component{
RelDead(){
如果(!)这个。道具行){
返回<查看></View>
}

设rows=this.props.rows;
返回(
<view style=styles.container>
<row tiles=行[0]/>
<row tiles=行[1]/>
<row tiles=行[2]/>
<row tiles=行[3]/>
<row tiles=行[4]/>
<row tiles=行[5]/>
<row tiles=行[6]/>
&Lt/VIEW & GT;
}
}

const styles=样式表。创建({
容器:{
身高:210,
Flex:1,
flexdirection:'行',
宽度:210,
背景色:“434F4F”,
颜色:“000000”,
}
})(二)

罗尔斯



导出默认类行扩展react.component{
RelDead(){
让tiles=this.props.tiles;

返回(
<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]/>
&Lt/VIEW & GT;
}
}

const styles=样式表。创建({
容器:{
身高:30,
宽度:210,
Flex:1,
flexdirection:'列',
背景色:“434F4F”,
颜色:“000000”,
Alignitems:'居中',
justifycontent:'中心',
}
(});

TileView:

导出默认类tileView扩展react.component{
RelDead(){
//返回<视图></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(“墙”+墙);
console.log(“团队”+团队);
让tilestyle=“teamnone”;
if(team==“o”)。{
tilestyle=“teamo”;
}else if(team==“x”)。{
tileStyle=“团队”;
}
console.log(“样式”+tilestyle);
返回<view style=“teamnone”><text>t</text></view>
}
}


const styles=样式表。创建({
TeXX:{
颜色:“77D4D4”,
宽度:30,
身高:30
}
TeMo:{
颜色:“9ED36C”,
宽度:30,
身高:30
},请
TeaveNo: {
颜色:“红色”,
宽度:30,
身高:30
}
(});
< /代码> 

我的主应用程序

render()。{
如果(!)这个状态){
返回<查看></View>
}

const playerid,yourturn,opponentturn,finished=this.state;

const overriderendriem=(项,索引,节:标题,数据)=><文本键=“foo”+索引>覆盖项</text>

if(this.state.table){
让table=this.state.table;
console.log(“饼干”);
主控台日志(桌板);
返回<view style=styles.boardContainer>
<board rows=table.board/>
&Lt/VIEW & GT;
}
}

const styles=样式表。创建({
容器:{
Flex:1,
flexdirection:'列',
背景色:“434F4F”,
颜色:“000000”,
Alignitems:'居中',
justifycontent:'中心',
}

板容器:{
Flex:1,
flexdirection:'行',
背景色:“434F4F”,
颜色:“000000”,
Alignitems:'居中',
justifycontent:'中心',
}

按钮:{
身高:100
}

按钮:{
颜色:“CCCCC”
}

清单:{
Flex:1
}

游戏者ID:{
玛金托普:100,
颜色:“白色”,
身高:40
}
(});
如何精确地设置瓷砖、行和板的高度和宽度,使总的板是一个正方形,每个瓷砖都呈正方形?

谢谢!很好的回答。如何将内容居中?我尝试运行代码,将文本更改为t并获取=



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
  }
});


如何精确地设置瓷砖、行和板的高度和宽度,使总的板是一个正方形,每个瓷砖都呈正方形?

谢谢您!很好的回答。如何将内容居中?我试着运行代码,将文本改为t,然后