反应本机可触摸不适用于键盘

Question

I am using bare react-native CLI.

My modal has a text input field inside. In the modal, when I open the keyboard, the buttons next to the text input are not working. They close the keyboard when tapped instead of working.

I tried it using the native modal module (with KeyboardAvoidingView) and using the react-native-modal

Image

   // with react-native-modal
  <View style={styles.PostCommentArea}>
        <View style={styles.PostBody}>
          <Image
            source={{ uri: UserDetails.profile_image }}
            style={styles.UserImg}
          />
          <InputField
            ref={InputRef}
            style={styles.InputField}
            length={0.65}
            hv={0.055}
            placeholder="Add Comment..."
            onSubmitEditing={postComment}
          />
          <TouchableHighlight style={styles.PostBtn} onPress={postComment}>
            {PostingComment ? (
              <>
                <Indicator size="small" color={Colors.WHITE} />
              </>
            ) : (
              <IconOutline
                name="arrow-up"
                size={height * 0.027}
                color={Colors.WHITE}
              />
            )}
          </TouchableHighlight>
        </View>
      </View>

Answer 1

One way of fixing this is wrapping the component in a ScrollView and using the keyboardShouldPersistTaps prop.

'never' tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this happens, children won't receive the tap.

'always', the keyboard will not dismiss automatically, and the scroll view will not catch taps, but children of the scroll view can catch taps.

'handled', the keyboard will not dismiss automatically when the tap was handled by children of the scroll view (or captured by an ancestor).

  <ScrollView keyboardShouldPersistTaps={'handled'}>
  ...
  </ScrollView>