react-native - 只有按钮文本区域是可点击的

Question

单击不适用于按钮的所有部分。只有文本区域是可点击的。

作为解决方案，我使用 contentStyle 而不是 style prop。但它只改变按钮触摸空间的颜色。我需要对整个按钮应用按钮单击，并在单击按钮的任何位置时更改整个按钮的颜色。

这是我的代码:

import * as React from "react";
import { Button } from "react-native-paper";
import styles from "./styles";

const Cbutton = ({ text, onPress }) => (
  <Button style={styles.wrapper} mode="contained" onPress={onPress}>
    {text}
  </Button>
);

export default Cbutton;

这是我的样式表代码。

import { StyleSheet } from 'react-native';

export default StyleSheet.create({

    wrapper: {
      flexDirection: 'row',
      justifyContent:'center',
      alignItems: 'center',
      width: ( "96%" ),
    },

});

Answer 1

我遇到了同样的问题，幸运的是修复非常简单 - 只需从 Button 的样式属性中删除 { alignItems: 'center' } 👍

应用时，它会缩小 Button 的内容容器，由于 Button 的内部样式，它无论如何都是不必要的。

对于高度，我建议在 contentStyle 属性中设置 { height: '100%' } 。但是，不确定是否自定义 onPress 颜色。如果您找不到现成的解决方案，我会尝试使用 react-native Pressable 来推出您自己的解决方案。 .