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>