React native 如何在React Native中设置视图的精确高度以获得方形网格？

我打算拥有一个7x7的瓷砖网格。我试着把每一块瓷砖做成30宽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
      }
       });

导出默认类板扩展React.Component{
render（）{
如果（！this.props.rows）{
回来
}
让rows=this.props.rows；
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
身高：210，
弹性：1，
flexDirection:'行'，
宽度：210，
背景颜色：“#434f4f”，
颜色：'#000000'，
},
});
Row.js
导出默认类行扩展React.Component{
render（）{
让tiles=this.props.tiles；
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
身高：30，
宽度：210，
弹性：1，
flexDirection:'列'，
背景颜色：“#434f4f”，
颜色：'#000000'，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});
TileView：
导出默认类TileView扩展React.Component{
render（）{
//返回；
//console.log（this.props.data）；
const kind=this.props.tile[0]；
const wall=this.props.tile[1]；
const team=this.props.tile[2]；
控制台日志（“种类”+种类）；
控制台日志（“墙”+墙）；
控制台日志（“团队”+团队）；
让tileStyle=“teamNone”；
如果（团队==“o”）{
tileStyle=“teamO”；
}否则如果（团队==“x”）{
tileStyle=“teamX”；
}
log（“样式”+tileStyle）；
返回T
}
}
const styles=StyleSheet.create({
teamX：{
颜色：“77d4d4”，
宽度：30，
身高：30
},
teamO：{
颜色：“9ed36c”，
宽度：30，
身高：30
},
teamNone：{
颜色：“红色”，
宽度：30，
身高：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
  }
});

render（）{
如果（！this.state）{
回来
}
const{playerId，yourTurn，opponentTurn，finished}=this.state；
const overrideRenderItem=（{item，index，section:{title，data}}）=>Override{item}
if（this.state.table）{
让table=this.state.table；
控制台日志（“饼干”）；
控制台.日志（表.板）；
回来
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
背景颜色：“#434f4f”，
颜色：'#000000'，
对齐项目：“居中”，
为内容辩护：“中心”，
},
集装箱：{
弹性：1，
flexDirection:'行'，
背景颜色：“#434f4f”，
颜色：'#000000'，
对齐项目：“居中”，
为内容辩护：“中心”，
},
按钮：{
身高：100
},
按钮：{
颜色：“#中交”
},
名单：{
弹性：1
},
玩家ID：{
玛金托普：100，
颜色：“白色”，
身高：40
}
});

如何准确设置瓷砖视图、行和板的高度和宽度，使整个板为正方形，每个瓷砖呈正方形

---

谢谢大家!！回答得很好。我怎样才能集中内容？我试着运行代码，将文本更改为T，并得到

记住，并非所有设备都具有相同的宽度和高度。 我建议您使用react native的Dimensions组件，使您的设计更具响应性。我为你做了一份世博会点心

从

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

从
行.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', 
 } 

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

从
TileView.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', 
 } 

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

我的答案更新了，请检查一下，让我知道它是否适合你。向上投票会更好嘿，这很好。不过有一个问题。内容“Text”恰好居中，但如果我将文本更改为“T”，则显示为不居中。我怎样才能解决这个问题？（参见更新的第一篇帖子）我想知道为什么我在在线模拟器中看到你的文本周围有一个边框，而在我运行它时却没有。你说的白色背景色无关紧要——它显示为整个电路板的边框。我看到一条小线条，背景颜色穿过中间（见更新的屏幕截图）。就好像这些行没有正确填充高度一样。编辑：我错了，我的TileView样式是字符串，而不是{style.}。现在正在尝试利润。谢谢！他有帮助吗？或者你在代码方面有更多的问题吗？是的，这很有帮助，谢谢！这条小线是由于一个舍入误差造成的，我通过在除法中加上+1修正了这个误差