关于 KeyboardAvoidingView

KeyboardAvoidingView 底层代码实现git地址

01 - behavior='position' 模式

效果： 点击输入框时，界面会向上抬升一个键盘的高度，
而且，不管键盘是否遮挡了输入框，输入框在编辑时都会向上抬升，这样会产生抬升过度的效果，体验不是很好

    return (
      <KeyboardAvoidingView behavior='position' >
        <ScrollView style={{ height: height, paddingTop: 20, }}>
          <View style={{ flex: 1, justifyContent: 'center', }}>
            <View style={{ height: 600, backgroundColor: 'lightgray', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>
            </View>
            <TextInput
              placeholder="<TextInput />"
              style={{ borderRadius: 5, borderWidth: 1, height: 44, paddingHorizontal: 10,
              }} />
            <View style={{ height: 200, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Bottom Area</Text>
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    );

改善方法： 设置 keyboardVerticalOffset 属性，调整KeyboardAvoidingView的偏移量，比如在监听键盘事件中，获取到键盘高度，然后刷新 keyboardVerticalOffset 的偏移值，还是可行的

解决界面抬升过度的问题： 设置 keyboardVerticalOffset 为负数，如：keyboardVerticalOffset = -150，效果是将界面往下移；设置 keyboardVerticalOffset 为正数，如：keyboardVerticalOffset = 50，效果是将界面往上移

解决点击背景区域无法回收键盘的问题：KeyboardAvoidingView 包裹的子组件不是 ScrollView 的话，点击背景区域无法回收键盘，可以手动添加 touchable 事件，实现键盘回收效果

解决界面没有抬升效果的问题：前提是 behavior='position' 的条件下, 如果KeyboardAvoidingView 包裹的子组件不是 ScrollView ，而是其它view，会出现界面没有抬升的效果，可以在如果KeyboardAvoidingView 包裹的子组件中增加一层 ScrollView

return (
      <KeyboardAvoidingView behavior='position' keyboardVerticalOffset = {-150} >
        <ScrollView style={{ height: height, paddingTop: 20, }}>
          <View style={{ flex: 1, justifyContent: 'center', }}>
            <View style={{ height: 600, backgroundColor: 'lightgray', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>
            </View>
            <TextInput
              placeholder="<TextInput />"
              style={{ borderRadius: 5, borderWidth: 1, height: 44, paddingHorizontal: 10,
              }} />
            <View style={{ height: 200, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Bottom Area</Text>
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    );

02 - behavior='padding' 模式

效果： 界面没有往上移

return (
      <KeyboardAvoidingView behavior='padding' keyboardVerticalOffset = {0} >
        <ScrollView style={{ height: height, backgroundColor: 'yellow' }}>
          <View style={{ flex: 1, justifyContent: 'center', }}>
            <View style={{ height: 600, backgroundColor: 'lightgray', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>
            </View>
            <TextInput
              placeholder="<TextInput />"
              style={{ borderRadius: 5, borderWidth: 1, height: 44, paddingHorizontal: 10,
              }} />
            <View style={{ height: 200, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Bottom Area</Text>
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    );

03 - behavior='height' 模式

效果：界面会正好抬升到和键盘高度平行的地方，但是整个界面的content高度会减少键盘的高度，所以当键盘回收是，界面会出现一段空白

return (
      <KeyboardAvoidingView behavior='height' keyboardVerticalOffset = {0} >
        <ScrollView style={{ height: height, paddingTop: 20, }}>
          <View style={{ flex: 1, justifyContent: 'center', }}>
            <View style={{ height: 600, backgroundColor: 'lightgray', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>
            </View>
            <TextInput
              placeholder="<TextInput />"
              style={{ borderRadius: 5, borderWidth: 1, height: 44, paddingHorizontal: 10,
              }} />
            <View style={{ height: 200, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Bottom Area</Text>
            </View>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    );

另外，KeyboardAvoidingView 中 ScrollView 设置样式为 flex: 1时，界面无法显示；如果不设置flex, 改设置height为屏幕高度时，界面才会正常显示出来, 将 ScrollView 改成 View 也是一样，需要设置 height 值，界面才会显示出来

return (
      <KeyboardAvoidingView behavior='height' keyboardVerticalOffset = {0} >
        <ScrollView style={{ flex: 1, backgroundColor: 'yellow' }}>
          <View style={{ flex: 1, justifyContent: 'center', }}>
            <View style={{ height: 600, backgroundColor: 'lightgray', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Top Area</Text>
            </View>
            <TextInput
              placeholder="<TextInput />"
              style={{ borderRadius: 5, borderWidth: 1, height: 44, paddingHorizontal: 10,
              }} />
            <View style={{ height: 200, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center', }}>
              <Text style={{ fontSize: 28, color: '#998462', textAlign: 'center', }}>Bottom Area</Text>
            </View>
          </View>
        </ScrollView>
       </KeyboardAvoidingView>
    );