只有按钮文本区域是可点击的答案

【问题标题】：Only button text area is clickable只有按钮文本区域是可点击的
【发布时间】：2019-06-08 02:29:38
【问题描述】：

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

作为一种解决方案，我使用了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%" ),
    },

});

【问题讨论】：

标签： react-native react-native-paper

【解决方案1】：

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

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

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

【讨论】：

在 contentStyle 中添加 { height: '100%' }，对我有用。谢谢！

【解决方案2】：

您必须使用TouchableHighlight 更改活动状态。

至于可点击区域，我认为默认的 rn-paper 按钮是合适的。您必须检查您导出组件的方式。

【讨论】：

【解决方案3】：

@os-hewawitharana 描述的问题只是在您将 disabled 设置为 true 然后再设置回 false 后发生。

这是模拟问题的方法。在构造函数中启用了按钮，因此您可以点击所有按钮区域，禁用并重新启用他的状态后，您将只能在文本区域中点击。组件和他的导出方法没有错。

constructor(props) {
    super(props);
    this.state = {
        desativado: false
    };

}


async componentDidMount() {
    setTimeout(() => {
        this.setState({ desativado: true });
    }, 2000);
    setTimeout(() => {
        this.setState({ desativado: false });
    }, 4000);
}

render(){
    return (
    <Button
         label={'Entrar'}
         color={'blue'}
         onPress={async () => {
             await this.setState({ desativado: true });
         }}
         disabled={this.state.desativado}
         mode="contained"
         ark={true} > <Text style={{ fontSize: 14 }}>Text</Text>
    </Button>
);

解决方案是使用版本 3 alpha

npm i react-native-paper@3.0.0-alpha.3

他们很快就会发布一个 v3 稳定版本，因为他们在 github 上的问题报告中回答：https://github.com/callstack/react-native-paper/issues/1297

【讨论】：