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

我不知道你在哪里应用这些样式宽度：“25％”或flex：1，因为你无法根据react-native文档直接为Button组件提供样式。因此，您需要在View中包装 Button 组件并将样式应用于该视图。

BTW在你的情况下宽度：'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调整项目

1 个答案: