2

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

作为解决方案，我使用contentStyle了 style 属性来代替。但它只改变按钮触摸空间的颜色。我需要为整个按钮应用按钮单击，并在单击按钮的任何位置时更改整个按钮的颜色。

这是我的代码：

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%" ),
    },

});
4

3 回答 3

4

我遇到了同样的问题，谢天谢地，修复非常简单 - 只需{ alignItems: 'center' }从 Button 的 style 道具中删除

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

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

于 2021-02-14T18:00:56.843 回答
2

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

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

于 2019-06-08T05:49:48.163 回答
1

@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

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

于 2019-08-21T15:09:51.117 回答