React Native 中切换TextInput坚持键盘睁开

2024年5月21日 216次阅读 来源: 传播正能量

1、题目

题目场景：

由于手机屏幕高度不定，做表单页面时，外层平常加上ScrollView组件，使其能够顺应屏幕举行转动。营业须要内里安排多个TextInput组件。

题目形貌：

涌现的题目是，初次点击focus TextInput，键盘弹出，然后想要点击一连focus TextInput时，结果没有focus，而是键盘收起，须要再次点击TextInput 举行focus。

               结果就是每次切换输入框都须要点击两次。

题目影响：

这个题目使得app的体验差到了顶点，饱受用户吐槽。

2、处置惩罚方案

2.1 团体思绪

坚持键盘一向睁开，然后点击的时刻，能够推断点击的组件是不是为TextInput，假如是则键盘不收起，不然键盘收起。

2.2 处置惩罚步骤

1） 在ScrollView中怎样坚持键盘一向睁开

浏览ScrollView的源码能够发明，它有一个属性keyboardShouldPersistTaps，默认值为false，示意只需点击当前focus组件外的处所，都邑引发键盘的收起。

这个是不能一连focus TextInput的缘由，引发键盘收起后，还捕捉了点击事宜，使得focus失效。 所以我们应当把ScrollView的这个属性设置为 true，让键盘一向坚持弹出状况。

它还有一个属性keyboardDismissMode，是罗列范例： 代表键盘在drag的时刻是不是收起

‘none’ 是默认值，代表键盘一向睁开

‘on-drag’ 代表 ScrollView拖动的时刻 键盘收起 在android下无效

‘interactive’ 翻译过来是互动的时刻键盘收起

然则发明在android和ios下也没什么结果

尝试着用这个属性去收起键盘，然则结果不好，并且不兼容android。

终究我们对ScrollView的操纵是加上属性 keyboardShouldPersistTaps = true

怎样推断点击到的组件是TextInput ？

2）怎样猎取触摸事宜的ID

浏览View的原文我们能够发明属性 onStartShouldSetResponderCapture，这个属性吸收一个回调函数，函数原型是 function(evt): bool，在触摸事宜最先（touchDown）的时刻，RN 容器组件会回调此函数，讯问组件是不是要挟制事宜响应者设置，本身吸收事宜处置惩罚，假如返回 true，示意须要挟制，假如返回false，示意不挟制。

传给回调函数的event里，包括一个触摸事宜参数nativeEvent。nativeEvent 的细致内容以下：

  • identifier：触摸的 ID，平常对应手指，在多点触控的时刻，用来辨别是哪一个手指的触摸事宜；

  • locationX 和 locationY：触摸点相对组件的位置；

  • pageX 和 pageY：触摸点相对于屏幕的位置；

  • timestamp：当前触摸的事宜的时候戳，能够用来举行滑动盘算；

  • target：吸收当前触摸事宜的组件 ID；

  • changedTouches：evt数组，从上次回调上报的触摸事宜，到此次上报之间的一切事宜数组。由于用户触摸过程当中，会发生大批事宜，有时刻能够没有实时上报，体系用这类体式格局批量上报；

  • touches：evt 数组，多点触摸的时刻，包括当前一切触摸点的事宜。
    这里我们用到的是target属性，它就代表点击的组件ID。

3）怎样依据组件ID晓得组件是不是为TextInput

  React-Native官网的0.28版文档中，View和TextInput组件中都有属性onLayout，这个属性吸收一个回调函数，函数原型是 function(evt)，在mount组件和layout的组件的时刻触发该事宜，传给回调函数的event里，参数nativeEvent，个中的target属性为该组件的ID。

  所以能够在TextInput组件layout时，将他们的ID存放在数组中，然后推断触发事宜的组件ID是不是在数组中，来肯定该组件时刻为TextInput。
  
  React-Native官网的0.28版文档中，View和TextInput组件中都有属性onLayout，这个属性吸收一个回调函数，函数原型是 function(evt)，在mount组件和layout的组件的时刻触发该事宜，传给回调函数的event里，参数nativeEvent，个中的target属性为该组件的ID。
  
  所以能够在TextInput组件layout时，将他们的ID存放在数组中，然后推断触发事宜的组件ID是不是在数组。
  
  0.28版本之前 TextInput组件没有onLayout属性，所以在0.28版本中TextInput没有onLayout属性，hack的要领是用View包裹TextInput，然后给View加onLayout属性，

猎取到的是View的组件ID，调试发明，View内里的TextInput的ID是外层View的ID+1，经由过程这类要领猎取的TextInput的组件ID，在0.29今后的版本中，能够直接给TextInput加onLayout属性了。

4）怎样掌握键盘的收起

 react-native 中有dismissKeyboard模块，用于设置键盘的收起，直接挪用该模块要领，即可收起键盘。

2.3 症结代码

const dismissKeyboard = require('dismissKeyboard');
const inputComponents = [];
  
    _onStartShouldSetResponderCapture (event) {
        let target = event.nativeEvent.target;
        if(!inputComponents.includes(target)) {
            dismissKeyboard();
        }
        return false;
    }
 
    _inputOnLayout(event){
        inputComponents.push(event.nativeEvent.target);
    }
  
<ScrollView ref="scrollView" keyboardShouldPersistTaps = {true} >
    <View onStartShouldSetResponderCapture={this._onStartShouldSetResponderCapture.bind(this)}>
          <TextInput onLayout={this._inputOnLayout.bind(this)} style={{flex: 1}}/>
    </View>
</ScrollView>
    原文作者：传播正能量
    原文地址: https://segmentfault.com/a/1190000007331888
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞