ios - 在 native react 中如何安排图像按钮

Question

我是 React Native 的新手。

我需要在 4 行和 2 列中排列 8 个图像按钮。我尝试使用 flexDirection，但它不起作用(混淆)。
实际上，我需要像下图那样在 native react 中安排我的 8 张图片。(我只需要 4 行，2 列)

请帮帮我..

我的代码

` 容器:{ 背景颜色:'#ccffcc',

        flex:1,
        flexDirection: ('row'),
        //paddingTop: 40,
        //alignItems :'center',
        padding:10

      },
      button1:{
         flex:1,
        // width : 100,
        // height: 100,
        flexDirection:'row',
        backgroundColor : '#ff9933',
        //alignSelf:'flex-start',
        marginTop: 70,
        margin: 20,
        //justifyContent:'center'
      },
      button2:{

        //flex:1,
        //flexDirection:'column',
        alignSelf:'center',
        //height :50,
        //backgroundColor : '#ff9933',
        //alignSelf:'flex-start',
        margin: 20,
        marginTop:-30,
        //justifyContent:'center'
      },
      button3:{
        //flex:1,
        flexDirection: 'column',
        // width : 100,
        // height: 100,
        backgroundColor : '#ff9933',
        alignSelf:'flex-start',
      //  marginTop:100,
        margin: 20,

        justifyContent:'center'
      },
      button4:{
        //flex:1,
      //  flexDirection: 'row',
        //height :50,
        //backgroundColor : '#ff9933',
        alignSelf:'flex-start',
        margin: 20,
      //  marginTop:30,
        justifyContent:'center'
      },
      button5:{
        flex:1,
        flexDirection:'column',
    // width : 100,
        // height: 100,
        backgroundColor : '#ff9933',
        alignSelf:'flex-end',
        //marginTop:50,
        margin: 20,

        justifyContent:'center'
      },
      button6:{
        flexDirection:'column',
        flex:1,
        //height :50,
        //backgroundColor : '#ff9933',
        alignSelf:'flex-end',
        margin: 20,
      //  marginTop:30,
        justifyContent:'center'
      },
      button7:{
        flexDirection:'column',
        flex:1,
       // width : 100,
        // height: 100,
        backgroundColor : '#ff9933',
        alignSelf:'flex-end',
      //  marginTop:100,
        margin: 20,

        justifyContent:'center'
      },
      button8:{
        flexDirection:'column',
        flex:1,    //height :50,
        //backgroundColor : '#ff9933',
        alignSelf:'flex-end',
        margin: 20,
      //  marginTop:30,
        justifyContent:'center'
      },`

Answer 1

您可以通过计算容器的宽度，然后简单地将宽度除以每行所需的项目数来做到这一点:

查看 this我设置的示例，下面也粘贴了代码。

 "use strict";

var React = require("react-native");
var { AppRegistry, StyleSheet, Text, View, Dimensions, ScrollView } = React;

var width = Dimensions.get("window").width - 20;
var images = [1, 2, 3, 4, 5, 6, 7, 8];

var SampleApp = React.createClass({
render: function() {
    var icons = images.map((image, i) => {
        return (
            <View key={i} style={styles.listItemContainer}>
                <View style={styles.listItem}>
                    <Text style={{ backgroundColor: "transparent" }}>
                        Image {image}
                    </Text>
                </View>
            </View>
        );
    });

    return (
        <ScrollView style={{ flex: 1, paddingLeft: 10, paddingRight: 10 }}>
            <View style={styles.container}>
                <View style={styles.list}>{icons}</View>
            </View>
        </ScrollView>
    );
}
});

var styles = StyleSheet.create({
container: {
    flex: 1
},
list: {
    flexDirection: "row",
    flexWrap: "wrap",
    flex: 1,
    marginTop: 50
},
listItemContainer: {
    width: width / 4,
    height: width / 4
},
listItem: {
    backgroundColor: "#ededed",
    borderRadius: 15,
    margin: 10,
    flex: 1
}
});

AppRegistry.registerComponent("SampleApp", () => SampleApp);