TouchableOpacity с радиусом границы отображается, но позволяет касаться за пределами радиуса - PullRequest
Новая
       46

TouchableOpacity с радиусом границы отображается, но позволяет касаться за пределами радиуса

1 голос
/ 28 января 2020

В моем приложении два <TouchableOpacity> компонента в форме круга. Я использую borderradius в стиле, чтобы получить форму круга, событие щелчка регистрируется где-либо внутри измерений высоты / ширины. Таким образом, рендеринг учитывает borderradius, а событие click - нет.

Я добавил скриншоты того, как он рендерит, и как он обрабатывает клики. рендер click 

export default class Record extends Component{
  constructor(props){
    super(props);
    const { navigation } = this.props;
    this.state = {...
    }
  targetStyle = () => {
    return {
      borderWidth:1,
      borderColor:'rgba(0,0,0,0.2)',
      backgroundColor:'red',
      width: this.state.targetRadiusPx * 2,
      height: this.state.targetRadiusPx * 2,
      borderRadius: this.state.targetRadiusPx
    }
  }  
  missStyle = () => {
    return {
      borderWidth:1,
      borderColor:'rgba(0,0,0,0.2)',
      width: this.state.missRadiusPx * 2,
      height: this.state.missRadiusPx * 2,
      backgroundColor:'#FFFFFF',
      borderRadius: this.state.missRadiusPx,
      alignItems:'center',
      justifyContent:'center',
    }

... 

<TouchableOpacity
  style={ this.missStyle()}
  onPress={(evt) => {...
  }}  
>
  <TouchableOpacity
     style={this.targetStyle()}
     onPress={(evt) => {...
     }}
     >
   </TouchableOpacity>
</TouchableOpacity>
...