web-dev-qa-db-fra.com

afficher 2 éléments par ligne [réagir natif]

J'apprends à réagir nativement et dans tous les tutoriels, je vois que ListView a été utilisé avec seulement 1 éléments par ligne. Je n'ai cependant pas utilisé ListView. Je n'ai que 6 éléments qui doivent être affichés sous forme de grille plate avec 2 éléments par ligne et doivent être réactifs. Je sais que c'est une question fondamentale, mais j'ai aussi essayé de mon côté, ce qui peut être vu dans l'image

enter image description here

C'est mon 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>
    );
}
javascriptreactjsreact-nativeflexbox
15
Serenity

Pour créer une grille à 2 lignes en utilisant ListView, vous pouvez utiliser ce code comme exemple:

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

Modifiez les styles pour choisir le nombre de lignes que vous souhaitez voir à l'écran. Ce code est réactif.

9
leo7r

Vous pouvez essayer la liste plate de réagir natif. où vous pouvez spécifier le nombre de colonnes et également mentionner la direction verticale ou la direction horizontale. Exemple de code:

<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}
          />

Reportez-vous https://facebook.github.io/react-native/docs/flatlist.html pour en savoir plus.

14
Thanmai C

La façon correcte de le faire serait avec flexBasis, avec une valeur définie sur (1/n)% où n est le nombre de lignes souhaité> 0. Pour deux lignes:

.parent {
    flex: 1;
    flexWrap: wrap;
    flexDirecton: row;
}
.child {
    flexBasis: '50%';
}
13
nikk wong

Si vous voulez que la vue de la grille réponde vraiment à l'importation de la largeur de l'appareil Dimesions:

import {
  StyleSheet,
  Text,
  ...
  Dimensions,
} from 'react-native';

Et changez la largeur gridItem pour cela:

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

Vous pouvez également modifier la largeur de l'image pour qu'elle soit identique ou inférieure à gridItem.

6
vtisnado

Vous pouvez utiliser une FlatList et lui attribuer le numColumns={2} prop et style={{ flexDirection: 'column' }}. Dans mon cas, je travaille avec 3 colonnes: FlatList avec numColumns={3}

5
Hernán Albertario