React Native Flat List 调整项目大小

Question

    <FlatList
      data={['1', '2', '3', '4', '5', '6', '7', '8']}
      numColumns={4}
      renderItem={({ item }) => (
        <Button title={item} />
      )}
    />

如何调整按钮的大小，使同一行的 4 个按钮占据整个屏幕宽度？ width: "25%" 或 flex: 1 无效。

Answer 1

我不知道你在哪里应用了这些样式 width: "25%" 或 flex: 1，因为你不能根据 react-native 文档直接为 Button 组件提供样式。因此，您需要将 Button 组件包装在视图中并将样式应用于该视图。

顺便说一句，在你的情况下 宽度：'25%' 和 flex: 1 都有效，下面是代码。

import React, { Component } from 'react';
import { View, StyleSheet,FlatList,Button } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <FlatList
      data={['1', '2', '3', '4', '5', '6', '7', '8']}
      numColumns={4}
      renderItem={({ item }) => (
        <View style={{flex:1,height:100}} >
         <Button title={item} />
        </View>
      )}
    />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
  },
});

零食演示 - https://snack.expo.io/SkidXdPDZ

React Native Flat List 调整项目大小

React Native Flat List resize item

android

css

react-native

flexbox

react-native-flatlist