반응 원어민에서 터치 가능 영역 제어

반응 원어민에서 터치 가능 영역 제어

나는 정사각형이 있다.TouchableOpacity버튼: 그래픽은 가운데에 있는 작은 점 아이콘일 뿐이고 나머지는 투명한 배경입니다.많은 Android 기기에서는 불투명 영역만 터치할 수 있고 나머지는 터치할 수 없기 때문에 누르는 것이 매우 어렵다는 것을 알 수 있습니다.

만질 수 있는 영역을 제어할 수 있는 방법은 없습니까?TouchableOpacity단추 같은 다른 형제들도요?

속성을 사용하여 터치 가능 영역을 늘릴 수 있습니다.이 기능은 늘어난 터치 영역이 다른 터치 가능 장치와 겹치지 않는다는 것을 알고 있는 경우에 유용합니다.

보다 견고한 솔루션은padding스타일 속성만질 수 있는 영역Touchable*구성 요소에는 요소의 패딩이 포함됩니다.

참조하기 쉽도록 몇 가지 코드를 추가하고 있습니다.

<View style={Styles.buttonStyle}>
    <TouchableOpacity onPress={onBtn1Pressed} hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}>
        <Text style={Styles.textStyle}>
           Button text
         </Text>
    </TouchableOpacity>
</View>

상위 단추 컨테이너의 스타일은 다음과 같습니다.폭이 150이기 때문에 클릭 가능 영역을 늘리기 위해 좌우 50으로 했습니다.

 buttonStyle:{
    alignItems:'center',
    backgroundColor: '#F92660',
    width:150,
    height:50,
    marginTop:20,
    marginBottom:10,
    marginRight:15,
    padding:5,
  },

제 서랍 아이콘이 헤더의 어디에서나 터치할 수 있는 것과 같은 문제가 있었습니다.드로어 아이콘의 새로운 뷰를 추가하고 속성을 포함한 아이콘을 추가하는 것만으로 문제를 해결했습니다.

전에

    return (
      <View style={styles.header}>
        <StatusBar backgroundColor="transparent" translucent={true} />
        <TouchableOpacity
          style={styles.trigger}
          onPress={() => {
            this.props.navigation.goBack();
          }}
        >
            <Ionicons name="arrow-back" size={35} color={"grey"} />
        </TouchableOpacity>
      </View>
    );
  }
}

끝나고

    return (
      <View style={styles.header}>
        <StatusBar backgroundColor="transparent" translucent={true} />
        <TouchableOpacity
          style={styles.trigger}
          onPress={() => {
            this.props.navigation.goBack();
          }}
        >
          <View style={{ width: 40, height: 40 }}>
            <Ionicons name="arrow-back" size={35} color={"grey"} />
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

언급URL : https://stackoverflow.com/questions/38955803/control-touchable-area-in-react-native