FlatList numColumns scheint nicht zu funktionieren, richtig?

Ich versuche, eine FlatList zu zeigen, ein paar user Avatare jemand in einem raster-format, aber es endet auf der Suche sehr seltsam, und ich kann nicht scheinen, um herauszufinden, wie es zu lösen ist.

Hier ist, wie es aussieht

Hier ist, was mein FlatList-code sieht wie folgt aus: 

<FlatList
style={{flex: 1}}
data={this.props.usersList}
horizontal={false}
numColumns={3}
columnWrapperStyle={{ marginTop: 10 }}
renderItem={({ item }) => this.renderItem(item)}
keyExtractor={this._keyExtractor}/>

und hier ist, was die Komponente sieht aus wie für renderItem: 

class UserButton extends React.Component {
render() {
    const { item, onPress } = this.props;
    return (
        <TouchableOpacity style={styles.button} onPress={onPress}>
            <Image
                source={(item.avatar) ? { uri: item.avatar } : require('../assets/images/userplaceholder.png')}
                resizeMode='cover'
                style={styles.imageStyle}
            />
        </TouchableOpacity>
    )
}

const styles = {
    button: {
        height: 100,
        width: 100,
        borderColor: '#aaa',
        backgroundColor: '#aaa',
        borderWidth: 2, 
        borderRadius: 50,
        justifyContent: 'center',
        alignItems: 'center',
        marginHorizontal: 5,
    },
    imageStyle: {
        height: 96,
        width: 96,
        alignSelf: 'center',
        borderRadius: 48,
        marginTop: (Platform.OS == 'android') ? 0 : 0.4
    }
}

export default UserButton;

Jemand irgendwelche Ideen?

InformationsquelleAutor Steven Conner | 2017-04-19
  1. 5

    Können Sie nehmen die Breite von Abmessungen und Breite für Elemente Ihrer flatlist.

    const {width} = Dimensions.get('window');
const itemWidth = (width) /4;
    InformationsquelleAutor Anjal Saneen
  2. 4

    Ich war in der ähnlichen situation, aber jetzt habe ich eine richtige raster mit flatList, können Sie einen Blick auf meinen code unten angehängt.

    <FlatList
    contentContainerStyle={{margin:4}}
    horizontal={false}
    numColumns={4}
    data={this.state.categoryDataSource}
    renderItem={(categoryItem) =>
        <CategoryListItem category={categoryItem.item} mode="small"/>
        }
    keyExtractor={category => category.id}
/>
    InformationsquelleAutor Kalpit Champanery
Schreibe einen Kommentar