reactjs - flexDirection:“行”在 FlatList 中不起作用
问题描述
我正在尝试低于输出但flexDirection: 'row'
无法正常工作。请谁能解释我如何获得以下输出。任何帮助表示赞赏。
我的代码是:
_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>
);}
谢谢你。
解决方案
如果对你有用,请看这个https://snack.expo.io/SywBhpMgW
推荐阅读
- react-native - React Native 使用 Twilio Programmable Chat 和 RN Gifted Chat
- html - 如何更改css中的字体?
- ios - 带有 AVCaptureVideoDataOutput 的 iOS 应用程序在 App Store 版本中崩溃
- python - 没有CUDA??在 Rstudio 上安装 keras/tensorflow 错误:错误:找不到 Python 模块 tensorflow.python.keras
- haskell - 循环图上的记忆遍历
- ruby-on-rails - Sublime Text & Source Tree 在 Excel VBA 中使用 xml.File 和 fsObject 生成的文件中看不到 FileDiff
- .net - .Net 远程设置 - 第一次请求后不起作用
- python - 为什么链接增强赋值会引发 SyntaxError
- php - 字符串对于回显功能来说太长了?
- r - 数据表中的“:”运算符(这与 := 无关,而只是:任何人都可以建议。)