React Native react-native-paper 按钮具有更大的高度答案

【问题标题】：React native react-native-paper button with greater heightReact Native react-native-paper 按钮具有更大的高度
【发布时间】：2020-12-01 21:03:55
【问题描述】：

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

我尝试过同时使用height 和padding，但都不能正常工作。

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

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

你能帮帮我吗？

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

【问题讨论】：

以上问题你找到解决办法了吗？

标签： javascript react-native button react-native-paper

【解决方案1】：

您可以在按钮周围创建一个 touchablehighlight 视图并调用相同的 onPress 函数。像这样：

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

【讨论】：