Question

我试图低于输出，但flexDirection: 'row'无法正常工作。请任何人都可以解释我如何获得低于输出。任何帮助表示赞赏。

必填输出 https://i.stack.imgur.com/K3Qh7.png

我的输出 https://i.stack.imgur.com/CcZsJ.png

我的代码是：

_renderItem(rowData) {
    return(
       <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
           <View style={{margin: 2, width: '24%', backgroundColor: '#fff', borderWidth: 1, borderColor: '#aaa'}}>
                <TouchableOpacity activeOpacity={0.9} style={{height: 190}}>
                    <Image source={{uri: rowData.item.images[0].src}} style={{height: '100%', width: '100%'}}/>
                </TouchableOpacity>
                <View style={{padding: 5}}>
                    <TouchableOpacity activeOpacity={0.9} style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                        <View>
                            <CapitalizedText style={{color: '#666', fontSize: 14}}>{rowData.item.title}</CapitalizedText>
                            <Text style={{fontSize: 15, color: '#666', justifyContent: 'center', alignItems: 'center'}}>{'₹' + rowData.item.variants[0].price}</Text>
                        </View>
                        <Icon size={24} color="#aaa" name="turned-in-not" />
                    </TouchableOpacity>
                    <CapitalizedText style={{fontSize: 14, color: '#bbb'}}>Printed Top</CapitalizedText>
                </View>
            </View>
         </View>
    );
}
render() {
   return(
       <View>
          {
             this.state.product_detail.length <= 0 ?
                <ActivityIndicator color = '#bc2b78' size = "large" style={{alignItems: 'center', justifyContent: 'center'}} />
          :
                <FlatList
                    keyExtractor = {( item, index ) => index }
                    data = { this.state.product_detail }
                    renderItem = {(rowData) => this._renderItem(rowData)}
                    ListFooterComponent = { this._render_Footer }
                />
          }
        </View>
);}

谢谢。

Answer 1

如果适合您https://snack.expo.io/SywBhpMgW

，请参阅此处

Answer 2

视图中只有一个子元素（另一个View元素），它将flexDirection设置为row。 FlexDirection仅对其直接子女有影响。

Answer 3

使用itId中的ItrId属性将numColumns的文本项对齐，例如

flatList

flexDirection：＆＃39; row＆＃39;在FlatList

3 个答案: