KeyboardAvoidingView 底層代碼實(shí)現(xiàn)git地址

01 - behavior='position' 模式

效果： 點(diǎn)擊輸入框時(shí)，界面會(huì)向上抬升一個(gè)鍵盤(pán)的高度，
而且，不管鍵盤(pán)是否遮擋了輸入框，輸入框在編輯時(shí)都會(huì)向上抬升，這樣會(huì)產(chǎn)生抬升過(guò)度的效果，體驗(yàn)不是很好

    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>
    );

改善方法： 設(shè)置 keyboardVerticalOffset 屬性，調(diào)整KeyboardAvoidingView的偏移量，比如在監(jiān)聽(tīng)鍵盤(pán)事件中，獲取到鍵盤(pán)高度，然后刷新 keyboardVerticalOffset 的偏移值，還是可行的

解決界面抬升過(guò)度的問(wèn)題： 設(shè)置 keyboardVerticalOffset 為負(fù)數(shù)，如：keyboardVerticalOffset = -150，效果是將界面往下移；設(shè)置 keyboardVerticalOffset 為正數(shù)，如：keyboardVerticalOffset = 50，效果是將界面往上移

解決點(diǎn)擊背景區(qū)域無(wú)法回收鍵盤(pán)的問(wèn)題：KeyboardAvoidingView 包裹的子組件不是 ScrollView 的話，點(diǎn)擊背景區(qū)域無(wú)法回收鍵盤(pán)，可以手動(dòng)添加 touchable 事件，實(shí)現(xiàn)鍵盤(pán)回收效果

解決界面沒(méi)有抬升效果的問(wèn)題：前提是 behavior='position' 的條件下, 如果KeyboardAvoidingView 包裹的子組件不是 ScrollView ，而是其它view，會(huì)出現(xiàn)界面沒(méi)有抬升的效果，可以在如果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' 模式

效果： 界面沒(méi)有往上移

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' 模式

效果：界面會(huì)正好抬升到和鍵盤(pán)高度平行的地方，但是整個(gè)界面的content高度會(huì)減少鍵盤(pán)的高度，所以當(dāng)鍵盤(pán)回收是，界面會(huì)出現(xiàn)一段空白

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 設(shè)置樣式為 flex: 1時(shí)，界面無(wú)法顯示；如果不設(shè)置flex, 改設(shè)置height為屏幕高度時(shí)，界面才會(huì)正常顯示出來(lái), 將 ScrollView 改成 View 也是一樣，需要設(shè)置 height 值，界面才會(huì)顯示出來(lái)

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>
    );