FlatList numColumns看起來不能正常工作？

我正在嘗試使用FlatList向網格格式的某個人顯示一堆用戶頭像，但最終看起來很奇怪，我似乎無法弄清楚如何解決此問題。FlatList numColumns看起來不能正常工作？

這裏是我的FlatList代碼如下所示：

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

和這裏的成分是什麼樣子的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;

人有什麼想法？

來源

2017-04-19 Steven Conner

我在類似的情況，但現在我有適當的網格使用flatList，你可以看看我的代碼下面。

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

來源

2017-08-09 13:01:06

您可以從尺寸寬度取並設置寬度爲您flatlist的項目。

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

來源

2017-12-04 13:53:55

FlatList numColumns看起來不能正常工作？

回答

相關問題