英文:
Arrange images in Horizontal - React Native - Flex not working
问题
我在这里尝试将图像水平排列在一起，然后将其转换为滑块。但在我将它们设置成一排之前，这并没有发生。需要帮助。
以下是代码：
样式 -
profileImgContainer: {
marginLeft: 8,
height: 80,
width: 80,
borderRadius: 40,
overflow: 'hidden',
},
profileImg: {
flex: 1,
flexDirection: 'row',
height: 80,
width: 80,
borderRadius: 40,
},
组件 -
<FlatList
data={this.state.Products}
keyExtractor={(item, index) => index.toString()}
renderItem= { ({item}) => (
<TouchableHighlight
style={[styles.profileImgContainer, { borderColor: 'green', borderWidth:1 }]}>
<Image source={{ uri: item.url }} style={styles.profileImg} />
</TouchableHighlight>
)}
/>;
它目前显示如下。
英文:
I am here trying to arrange the images horizontally next to each other and later convert it to the slider. But until I set them in a row, which is not happening for me. Need help
Below is the code:
Style -
profileImgContainer: {
marginLeft: 8,
height: 80,
width: 80,
borderRadius: 40,
overflow: 'hidden',
},
profileImg: {
flex: 1,
flexDirection: 'row',
height: 80,
width: 80,
borderRadius: 40,
},
Component -
<FlatList
data={this.state.Products}
keyExtractor={(item, index) => index.toString()}
renderItem= { ({item}) => (
<TouchableHighlight
style={[styles.profileImgContainer, { borderColor: 'green', borderWidth:1 }]}>
<Image source={{ uri: item.url }} style={styles.profileImg} />
</TouchableHighlight>
)}
/>
It is currently appearing like this.
答案1
得分: 3
尝试类似以下方式：
<FlatList
horizontal
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
只需将此属性添加到您的FlatList中：
horizontal
英文:
Try something like this :
<FlatList
horizontal
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
Just add this property to your flatlist :
horizontal
答案2
得分: 2
你缺少了FlatList的horizontal属性，只需将你的代码替换为以下内容：
<FlatList
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
horizontal
/>
希望对你有所帮助。如果有疑问，请随时提问。
英文:
You are missing the horizontal property of Flat list , Just replace your code with this :
<FlatList
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
horizontal
/>
Hope it helps .feel free for doubts
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论