每行显示2个项目[本机反应]

Ser*_*ity 16 javascript flexbox reactjs react-native

我正在学习本机反应,在所有教程中,我看到ListView每行只使用1个项目.不过我还没有使用过ListView.我只有6个项目必须显示为平面网格,每行2个项目,应该是响应.我知道它是一个基本问题,但我也试过了我的身边,可以在图像中看到

在此输入图像描述

这是我的代码

 renderDeviceEventList() {
    return _.map(this.props.deviceEventOptions, deviceEventOption => (
        <View key={deviceEventOption.id}>
            <Icon
                name={deviceEventOption.icon_name}
                color="#ddd"
                size={30}
                onPress={() =>
                    this.props.selectDeviceEvent(deviceEventOption)
                }
            />
            <Text style={{ color: "#ff4c4c" }}>
                {deviceEventOption.icon_name}
            </Text>
        </View>
    ));
}
render() {
    return (
        <View
            style={{
                flex: 1,
                top: 60,
                flexDirection: "row",
                justifyContent: "space-around",
                flexWrap: "wrap",
                marginBottom: 10
            }}
        >
            {this.renderDeviceEventList()}
        </View>
    );
}
Run Code Online (Sandbox Code Playgroud)

Tha*_*i C 18

您可以尝试使用本机的平面列表.在哪里可以指定列数,也可以提到垂直方向或水平方向.示例代码:

<FlatList
data={this.props.data}
keyExtractor={this._keyExtractor}     //has to be unique   
renderItem={this._renderItem} //method to render the data in the way you want using styling u need
horizontal={false}
numColumns={2}
          />
Run Code Online (Sandbox Code Playgroud)

有关更多信息,请参阅https://facebook.github.io/react-native/docs/flatlist.html.


nik*_*ong 15

正确的方式来做到这将是与flexBasis,具有设置成一个值(1/n)%,其中n是行> 0.对于两行的期望#:

.parent {
    flex: 1;
    flexWrap: wrap;
    flexDirecton: row;
}
.child {
    flexBasis: '50%';
}
Run Code Online (Sandbox Code Playgroud)


leo*_*o7r 11

要使用ListView您制作2行网格,可以使用此代码作为示例:

renderGridItem( item ){
    return (<TouchableOpacity style={styles.gridItem}>
        <View style={[styles.gridItemImage, justifyContent:'center', alignItems:'center'}]}>
            <Text style={{fontSize:25, color:'white'}}>
                {item.fields.name.charAt(0).toUpperCase()}
            </Text>
        </View>
        <Text style={styles.gridItemText}>{item.fields.name}</Text> 
    </TouchableOpacity>
    );
}

renderCategories(){

    var listItems = this.dsinit.cloneWithRows(this.state.dataSource);

    return (
        <ScrollView style={{backgroundColor: '#E8E8E8', flex: 1}} >
            <ListView 
                contentContainerStyle={styles.grid}
                dataSource={listItems}
                renderRow={(item) => this.renderGridItem(item)}
            />
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    grid: {
        justifyContent: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 1,
    },
    gridItem: {
        margin:5,
        width: 150,
        height: 150,
        justifyContent: 'center',
        alignItems: 'center',
    },
    gridItemImage: {
        width: 100,
        height: 100,
        borderWidth: 1.5, 
        borderColor: 'white',
        borderRadius: 50,
    },
    gridItemText: {
        marginTop: 5,
        textAlign:'center',
    },
});
Run Code Online (Sandbox Code Playgroud)

更改样式以选择要在屏幕上显示的行数.此代码具有响应性.


vti*_*ado 7

如果你想使网格视图真实地响应有关该设备的宽度进口Dimesions:

import {
  StyleSheet,
  Text,
  ...
  Dimensions,
} from 'react-native';
Run Code Online (Sandbox Code Playgroud)

并为此更改gridItem宽度:

gridItem: {
  margin: 5,
  width: Dimensions.get('window').width / 2.2, //Device width divided in almost a half
  height: 150,
  justifyContent: 'center',
  alignItems: 'center',
},
Run Code Online (Sandbox Code Playgroud)

您还可以将图像宽度更改为与gridItem相同或更小.


Her*_*rio 5

您可以使用FlatList并将其设置为numColumns={2}prop和style={{ flexDirection: 'column' }}。就我而言,我正在使用3个列: FlatList withnumColumns={3}