React Native Paper 按钮图标大小

Question

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

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

但是，如果我尝试使用size={40}调整 Button 的大小，则它不起作用。

Answer 1

您是否尝试过使用 Button labelStyle 道具？

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

Answer 2

您可以通过添加图标作为孩子来做到这一点，但该功能尚未开发，他们已经提出了 PR：

 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>

希望能帮助到你。 随时怀疑

Answer 3

对于仍然坚持这个问题的人，我发现这个解决方案有效：

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

将文本包装在组件中并给它一个字体大小，而 labelStyle 只会增加图标的大小

Answer 4

我尝试了这个并实现了我想要的，希望这对将来的某人有所帮助......

  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,
  },
});

Answer 5

所有提供的解决方案都很重要，这就是我回答这个问题的原因

<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>