每行显示2项[反应原生] [英] show 2 items per row[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> 
< / View> 
< / Text> 
< / Text> {bf4c4c'}}> {deviceEventOption.icon_name} ）; 
 
 $（
 $（
 $ b $ flex：1，
 top：60，
 flexDirection：'row'，
 justifyContent：'space-around'，
 flexWrap：'wrap'，
 marginBottom：10，
}} 
> 
 {this.renderDeviceEventList（）} 
< / View> 
）; 
 
  

解决方案

使用 ListView 你可以使用这个代码作为例子：
$ b $ $ p $ 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）;
$ b $ return（
< ScrollView style = {{backgroundColor：'＃E8E8E8'，flex：1}}>
< ListView
contentContainerStyle = {styles .grid}
dataSource = {listItems}
renderRow = {（item）=> this.renderGridItem（item）}
/>
< / ScrollView>
）; （b



$ b $ style = 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'，
}，
}）;


更改样式以选择想要在屏幕上看到的行数。这段代码是响应式的。

I am learning react native and in all the tutorials i see ListView has been used with only 1 items per row. I have not used ListView, though. I have only 6 items that has to be shown as flat grid with 2 items per row and should be responsive. I know its a basic question, but i have tried from my side too which can be seen in the image

This is my code

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

解决方案

To make a 2 row grid using ListView you could use this code as an example:

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

Change styles to choose how many rows you want to see on screen. This code is responsive.

这篇关于每行显示2项[反应原生]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！