React Native Flat List 调整项目大小答案

【问题标题】：React Native Flat List resize itemReact Native Flat List 调整项目大小
【发布时间】：2017-08-08 16:54:44
【问题描述】：

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

如何调整按钮的大小以使同一行上的 4 个按钮占据整个屏幕宽度？ width: "25%" 或 flex: 1 不起作用。

【问题讨论】：

标签： android css react-native flexbox react-native-flatlist

【解决方案1】：

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

顺便说一句，在您的情况下 width: '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

【讨论】：