React Native Paper按钮图标大小

9fkzdhlc  于 6个月前  发布在  React
关注(0)|答案(6)|浏览(74)

嘿,有没有办法设置我的按钮图标的大小?

<Button
  contentStyle={[accordionStyles.header__button, ]}
  icon={show === Props.value ? "chevron-up" : "chevron-down"}
  direction='rtl'
  color='black'
>
...
</Button>

字符串
但如果我尝试大小按钮与size={40}它不工作。

rkue9o1l

rkue9o1l1#

对于仍然在这个问题上卡住的人,我找到了这个有效的解决方案:

<Button
          mode="outlined"
          labelStyle={{fontSize: 25}}
          onPress={() => doSomething()}
          icon="share"
          >
          <Text style={{fontSize: 16}}>My Text</Text>
        </Button>

字符串
将文本换行到组件中并给予字体大小,而labelStyle只会增加图标的大小

o2g1uqev

o2g1uqev2#

你试过使用Button labelStyle属性吗?

<Button
    labelStyle={{ fontSize: 24 }}
    icon="repeat"
    mode="text"
  >
    my button
  </Button>

字符串

mpbci0fu

mpbci0fu3#

你可以通过添加图标作为一个孩子,仍然该功能尚未开发,他们已经提出了公关:

import { Button, Text } from 'react-native-paper';
import Icon from 'react-native-vector-icons/FontAwesome';

<Button
  style={buttonStyle}
  mode="contained"
  contentStyle={buttonContentStyle}
>
  <Icon name="warning" size={24} color="#fff" />
  <View style={{ width: 16, height: 1 }} />
  <Text style={buttonTextStyle}>Hello World</Text>
</Button>

字符串
希望能有所帮助。请放心怀疑

cx6n0qe3

cx6n0qe34#

所有提供的解决方案都是jugar这就是为什么我回答这个问题

<Button 
    icon={({ size, color }) => (
        <Icon name="location" size={20} color="#000" />
    )}
    mode="outlined" 
    onPress={() => console.log('Pressed')}
    contentStyle={{flexDirection: 'row-reverse'}}
    style={{borderColor:"#000",borderWidth:2}}
>
    Details
</Button>

字符串

qeeaahzv

qeeaahzv5#

我尝试了这一个,并实现了我想要的,希望这将有助于某人在未来.

import { Button } from "react-native-paper";
import PlusIcon from "react-native-vector-icons/AntDesign";
import { View, Text, StyleSheet } from "react-native";
 <View style={styles.button}>
    <Button uppercase={false} color="#FFFFFF" style={styles.button}>
      Add New Booking
    </Button>
    <View style={{ paddingLeft: "auto", right: -75 }}>
      <PlusIcon size={32} color={"#fff"} name={"pluscircle"} />
    </View>
  </View>

 const styles = StyleSheet.create({
 
button: {
width: 208,
height: 52,
 alignItems: "center",  
justifyContent: "center",
borderRadius: 30,
backgroundColor: "#94C100",
position: "absolute",
bottom: 0,
right: 10,
  },
});

字符串

kzmpq1sx

kzmpq1sx6#

在“react-native-paper”中:“^5.11.1”:

import { Button, Icon } from 'react-native-paper';
...

<Button
   contentStyle={[accordionStyles.header__button, ]}
   icon={({ size, color }) => (
      <Icon source={show === Props.value ? "chevron-up" : "chevron-down"} size={50} color={color} />
   )}
   direction='rtl'
   color='black'
>

...
</Button>

字符串

相关问题