反应本机react-native-paper按钮具有更大的高度

Question

我在用着react-native-paper，我想制作一个比正常尺寸更大的按钮，如 gif 所示。

我尝试过同时使用height和padding，但两者都无法正常工作。

您在 gif 中看到的是带有填充的示例。

单击的唯一方法是在中心，在其他地方该事件不会发生。

你能帮我个忙吗？

<Button
          mode="contained"
          labelStyle={{ color: Colors.white }}
          style={{ padding: 30 }}
          onPress={() => console.log('Pressed')}>
          Start
        </Button>

Answer 1

您可以使用

contentStyle

例子

<Button
  onPress={() => {}}
  style={styles.completeFormButton}
  styleText={styles.completeFormButtonText}
  contentStyle={{ // <--- HERE-----
    paddingVertical: 10,
  }}
  preset="outlined"
/>

react-native-papper有这三个props来传递样式

contentStyle 类型：StyleProp 按钮内部内容的样式。使用此道具应用自定义高度和宽度，并使用 flexDirection: 'row-reverse' 设置右侧的图标。

样式 类型：StyleProp

labelStyle 类型：StyleProp 按钮文本的样式。

查看文档 React Native 论文