Только текстовая область кнопки кликабельна

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

У меня была такая же проблема, и, к счастью, исправить очень просто - просто удалите { alignItems: 'center' } из опоры стиля вашей кнопки 👍

При применении он сжимает контейнер содержимого Button, и в этом нет необходимости благодаря внутреннему стилю Button.

Для высоты рекомендую установить { height: '100%' }в свойстве contentStyle. Однако не уверен в настройке цвета onPress. Если вы не можете найти готовое решение, я бы попробовал накатить собственное с помощью react-native Pressable .

Answer 2

Вы должны использовать TouchableHighlight, чтобы изменить активное состояние.

Что касается, что касается интерактивной области, я думаю, кнопка rn-paper по умолчанию является правильной. Вы должны проверить, как вы экспортировали компонент.

Answer 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

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

Вскоре они выпустят стабильную версию v3, ответив в моем отчете о проблеме на github: https://github.com/callstack/react-native-paper/issues/1297