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

您可以在按鈕周圍創建一個可觸摸的高亮視圖並調用相同的 onPress function。 像這樣的東西：

<TouchableHighlight onPress={() => console.log('Pressed')}>
        <View
          style={{
            height: 70,
            width: 110,
            borderRadius: 5,
            backgroundColor: 'blue',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Button
            mode="contained"
            labelStyle={{ color: 'blue' }}
            onPress={() => console.log('Pressed')}>
            Start
          </Button>
        </View>
      </TouchableHighlight>

Answer 2

您可以使用

contentStyle

例子

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

react-native-papper有這三個 props 可以通過 styles

contentStyle類型：StyleProp 按鈕內部內容的樣式。 使用此道具應用自定義高度和寬度，並使用 flexDirection: 'row-reverse' 設置右側的圖標。

樣式類型：StyleProp

labelStyle類型：StyleProp 按鈕文本的樣式。

查看文檔 react native paper