Can touch out side a View Component be detected in react native?

问题

My React native application screen has View component with few text inputs. How can touch be detected on screen outside that View? Please help.

Thanks

回答1:

Put your View inside of TouchableWithoutFeedback, expand TouchableWithoutFeedback fullscreen and add onPress handler to it.

<TouchableWithoutFeedback 
  onPress={ /*handle tap outside of view*/ }
  style={ /* fullscreen styles */}
>
    <View>
     ...
    </View
</TouchableWithoutFeedback>

回答2:

As Andrew said: You can wrap your View with TouchableWithoutFeedback and adding a onPress you can detect when the view is tapped.

Another way to achieve that is having responses for touch events from the view.

 /* Methods that handled the events */
handlePressIn(event) {
  // Do stuff when the view is touched
}

handlePressOut(event) {
    // Do stuff when the the touch event is finished
}

...

    <View
      onStartShouldSetResponder={(evt) => true}
      onMoveShouldSetResponder={(evt) => true}
      onResponderGrant={this.handlePressIn}
      onResponderMove={this.handlePressIn}
      onResponderRelease={this.handlePressOut}
    >
         ...
    </View>

The difference between Grant and move is that Grant is just when the user press, and Move is when the user is pressing and moving the position of the press

回答3:

You could try to use a Modal to create this behavior.

When you click the input field you show the Modal containing the multiple texts inputs. If you click outside the Modal it hides.

来源：https://stackoverflow.com/questions/40081732/can-touch-out-side-a-view-component-be-detected-in-react-native