Question

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

作为解决方案，我使用了contentStyle而不是样式道具。但是它仅更改按钮触摸空间中的颜色。我需要对整个按钮应用按钮单击，并在单击按钮的任何位置时更改整个按钮的颜色。

这是我的代码：

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 推出您自己的解决方案。

Answer 2

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

就可点击区域而言，我认为默认情况下rn-paper按钮是正确的。您必须检查导出组件的方式。

Answer 3

@ os-hewawitharana描述的问题只是在将禁用者设置为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版本的情况下

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

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

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

3 个答案: