首页 文章

React Native FlatList with columns，Last item width

提问于
浏览 次
34

我正在使用FlatList来显示两列中的项目列表

<FlatList style={{margin:5}}
  data={this.state.items}
  numColumns={2}
  keyExtractor={(item, index) => item.id }
  renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> }
/>

卡组件只是一个具有一些样式的视图：

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View>

它工作正常，但如果项目数是奇数，则最后一行只包含一个项目，该项目会延伸到屏幕的整个宽度 .

如何将项目设置为与其他项目相同的宽度？

enter image description here

react-native react-native-flatlist

4 回答

  • 11

    检查项目数是否为奇数，如果数字为奇数，则为最后一项提供特殊样式 . 例如）

    {this.props.count%2!= 0?
                <View style={this.props.entireList.indexOf(item) === this.props.entireList.length-1 ?stles.v1:styles.v2}></View>
 v1:{
 width:'48%'
}
v2:{
}
    回复于
  • 0

    为您的情况使用 flex: 1/2

    因此：如果你的项目应该有3个列，你的 item 应该有 flex 的1 /（列数）：1/3

    回复于
  • 11

    你可以在这里尝试一些事情 .

    A）为卡设置预定义的宽度（可能等于您设置的高度？） . 然后您可以使用 alignItems 将卡片放在中间或左侧 - 不确定您想要的位置 .

    B）如果有偶数卡片，您可以在末尾添加一个空视图以填充此空间 . 我发现这种方法非常笨重，但在尝试为未来元素留出空间时非常有用 .

    C）只需使用 alignItems: 'space-between ，我喜欢使用它来居中项目，但你必须定义宽度，或使用像 flex:0.5 这样的东西

    我建议更多地研究一下flexbox来帮助你解决这个问题，因为很难说出这种情况的背景 . 我假设上述方法会有所帮助，但如果没有，这里有一些链接供您查看 -

    First link

    Second link

    第三个链接Link Broken

    希望这可以帮助 . 如果您需要进一步澄清 - 请问

    回复于
  • 0

    您可以尝试通过Dimensions获取设备的当前宽度，根据要渲染的列数进行一些数学运算，减去边距并将其设置为minWidth和maxWidth .

    例如：

    const {height, width} = Dimensions.get('window');
const itemWidth = (width - 15) / 2;

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', minWidth: {this.itemWidth}, maxWidth: {this.itemWidth}, height: 130}} ></View>
    回复于

相关问题