Ẩn thành phần khi nhấp vào bên ngoài

Question

Tôi muốn ẩn một thành phần khi được nhấp vào bên ngoài nó. Một cái gì đó như loại bỏ bàn phím. Tôi đã làm điều này bằng cách gói toàn bộ khung nhìn của tôi bên trong ToucheableWithoutFeedback bằng cách thay đổi trạng thái onPress nhưng Toucheables vô hiệu hóa ScrollView.

Bạn có thể cho tôi ý tưởng về một cách mà scrollview vẫn hoạt động không?

hoặc

Làm cách nào để xử lý các lần nhấn trong chế độ xem hoặc bên ngoài thành phần của tôi ??

mã hiện tại của tôi là một cái gì đó như thế này:

<TouchableWithoutFeedback onPress={() =>{this.setState({toggle:false})}}> 
    <View> 
    {//content} 
    </View> 

    <ScrollView> 
    {//lists here} 
    </ScrollView> 
    {{ 
    if(this.state.toggle){ 
    return 
    (<View> 
     {//The view that im hiding when clicking outside it} 
    </View>) 
    } 
    else 
    return <View/> 
</TouchableWithoutFeedback> 

Answer 1

Một cách tiếp cận là phải có "giả" container cho TouchableWithoutFeedback whis chỉ là một lớp dưới nội dung thực tế. Dưới đây là một ví dụ: https://rnplay.org/apps/k2RSNw

render() { 
    return (
    <View style={styles.container}> 
     <TouchableWithoutFeedback onPress={(evt) => this.toggleState(evt)}> 
     <View style={styles.touchable}></View> 
     </TouchableWithoutFeedback> 
     <View style={[styles.modal, this.isModalVisible()]}> 
     <Text>Modal</Text> 
     </View> 
    </View> 
); 
} 

Nếu bạn muốn làm một cái gì đó cụ thể tùy thuộc vào các yếu tố nhấn vào, bạn có thể cư dữ liệu sự kiện từ evt được cung cấp cho toggleState().

Tôi đã thực hiện chuyển đổi chế độ hiển thị qua kiểu. Điều này là bởi vì trong nhiều trường hợp tôi đã xử lý đã có một số loại hiệu ứng hình ảnh để chuyển đổi phần tử.

Answer 2

Cách đơn giản là với một phương thức minh bạch

<Modal 
      transparent 
      visible={this.state.isAndroidShareOpen} 
      animationType="fade" 
      onRequestClose={() => {}} 
     > 
      <TouchableOpacity 
      activeOpacity={1} 
      onPress={() => { 
       this.setState({ 
       isAndroidShareOpen: false, 
       }); 
      }} 
      style={{ 
       backgroundColor: 'transparent', 
       flex: 1, 
      }} 
      > 
      <TouchableOpacity 
       activeOpacity={1} 
       style={{ 
       backgroundColor: '#f2f2f2', 
       left: 0, 
       top: 50, 
       aspectRatio: 1.5, 
       width, 
       position: 'absolute', 
       }} 
      > 
       <Text>content</Text> 
      </TouchableOpacity> 
      </TouchableOpacity> 
     </Modal>