Question

我想制作一个独立的列平面清单，我该如何定位目标状态？

当前状态：

目标状态：

<FlatList
            ref={(list) => this.myFlatList = list}  
            numColumns={2}   
            columnWrapperStyle={{justifyContent:'space-between'}}
            data={this.state.products}
            renderItem={({item, separators})=>(
                <View key={item.key}>
                <TouchableOpacity style={{width:WIDTH/2,flexDirection:"row",alignItems:"center",justifyContent:"center",marginTop:20}}>
                    <AutoHeightImage width={WIDTH/2.2} style={{borderRadius:10}} source={item.uri != undefined ? {uri:url.getURL()+"/"+item.uri} : require('../../img/product.jpg')}/>
                    <View style={{position:"absolute",bottom:10,backgroundColor:"rgba(0,0,0,0.4)",width:WIDTH/2.2,flexDirection:"row",alignItems:"center",paddingHorizontal:5}}>
                        <Text style={{width:70+"%",color:"white",fontSize:WIDTH*0.040,fontWeight:"500"}} numberOfLines={1}>{item.name}</Text>
                        {/*<Text style={{width:30+"%",color:"white",fontSize:WIDTH*0.035,fontWeight:"500",textAlign:"right"}}>{item.price+" TL"}</Text>*/}
                    </View>
                </TouchableOpacity>

                </View>
            )}
            //onEndReached={this.getoldmessages}
            //onEndReachedThreshold={0.5}
            removeClippedSubviews={true} 
            refreshing={this.state.refreshing}  
            onRefresh={this.handleRefresh}  
            extraData={this.state}   
            />

Answer 1

尝试recyclerlistview，它支持您需要的交错网格布局

React Native-带有独立列的平面列表

1 个答案: