下面的代码创建一个图标按钮网格。
import * as React from 'react';
import Background from '../components/Background'
import { Alert, View, FlatList, Text, StyleSheet } from 'react-native'
import { IconButton } from "@react-native-material/core";
import Icon from "@expo/vector-icons/MaterialCommunityIcons";
const Item = ({ item }) => {
return <View style={styles.item}>{item.icon}</View>;
};
export default function HomeScreen() {
return (
<Background>
<View style={styles.list}>
<FlatList
data={itemData}
numColumns={3}
renderItem={Item}
keyExtractor={(item) => item.alt}
/>
</View>
</Background>
)
}
const styles = StyleSheet.create({
list: {
marginHorizontal: "auto",
width: 300,
borderRadius: 10,
},
item: {
flex: 1,
maxWidth: "33.33%", // 100% devided by the number of rows you want
alignItems: "center",
}
})
const itemData = [
{
icon: (
<IconButton
icon={props => <Icon name="food" {...props} />} /> //needs food
),
},
{
icon: (
<IconButton
icon={props => <Icon name="bed" {...props} />} /> //needs sleep
),
},
{
icon: (
<IconButton
icon={props => <Icon name="glass-wine" {...props} />} />
),
},
]
我想更改平面列表中图标按钮的大小。我尝试将size = {50}
添加到styles.item
,但实际上并没有更改大小。我还尝试了其他一些操作,但IconButton似乎拒绝任何大小参数。
这可能吗?
1条答案
按热度按时间oknwwptz1#
是否尝试将
size
属性传递给IconButton
组件的icon
属性?例如,];
通过将大小属性设置为50,您应该看到网格中图标的大小增加了。
此外,您还可以通过添加
height
和width
来控制图标按钮容器的大小,例如});