Question

我是新来的本地人。

我需要在4行和2列中安排8个图像按钮。我尝试使用flexDirection，但它不起作用（混淆）。
实际上我需要安排我的8图像像下面的图像反应原生。（我只需要4行，2列）

请帮帮我..

我的代码

` 容器：{ backgroundColor：＆＃39; #ccffcc＆＃39;，

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

Answer 2

您可以在此处使用反应原生网格视图：

https://github.com/lucholaf/react-native-grid-view

在本机中如何安排图像按钮

2 个答案: