更高的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函数。如下所示：

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