需要用到react native官網(wǎng)的組件

KeyboardAvoidingView

官網(wǎng)解釋?zhuān)罕窘M件用于解決一個(gè)常見(jiàn)的尷尬問(wèn)題：手機(jī)上彈出的鍵盤(pán)常常會(huì)擋住當(dāng)前的視圖。本組件可以自動(dòng)根據(jù)鍵盤(pán)的位置，調(diào)整自身的 position 或底部的 padding，以避免被遮擋。
官網(wǎng)地址

ScrollView

需要用到滾動(dòng)視圖，目的可以點(diǎn)擊屏幕關(guān)閉鍵盤(pán)。
如果沒(méi)有添加ScrollView的話，點(diǎn)擊屏幕空白處是沒(méi)有人任何反應(yīng)的。
官網(wǎng)地址

Keyboard

官網(wǎng)解釋?zhuān)篕eyboard模塊可以監(jiān)聽(tīng)原生鍵盤(pán)事件以做出相應(yīng)回應(yīng)，比如收回鍵盤(pán)。
當(dāng)視圖被ScrollView包裹的時(shí)候，鍵盤(pán)彈起會(huì)多出和鍵盤(pán)高度一致的白色遮擋層，
這個(gè)時(shí)候就需要使用KeyboardAvoidingView組件的keyboardVerticalOffset屬性偏移處理。
官網(wǎng)地址
我們可以看看沒(méi)有處理偏移的效果

未處理偏移

添加了keyboardVerticalOffset需要是負(fù)數(shù)，讓它向下偏移，如果是正數(shù)就是向上偏移。
這個(gè)偏移量我們可以通過(guò)獲取鍵盤(pán)的高度來(lái)設(shè)置。

componentWillMount() {  // 監(jiān)聽(tīng)鍵盤(pán)高度
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }

  _keyboardDidShow(e) {  // 獲取鍵盤(pán)高度
    this.setState({
      keyboardHeight: e.endCoordinates.height
    })
  }

  _keyboardDidHide(e) {
    this.setState({
      keyboardHeight: 0
    })
  }

  componentWillUnmount() {  // 移除監(jiān)聽(tīng)
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

然后把獲取的高度設(shè)置為偏移的高度

keyboardVerticalOffset={-this.state.keyboardHeight}

設(shè)置好了偏移，我們可以看看最終的效果

添加了偏移處理

最終代碼

import React, { Component } from 'react';
import {
  View,
  Keyboard,
  TextInput,
  ScrollView,
  KeyboardAvoidingView
} from 'react-native'

export default class Test6 extends Component {
  state = {
    text: '',
    keyboardHeight: ''  // 鍵盤(pán)高度
  }

  componentWillMount() {  // 監(jiān)聽(tīng)鍵盤(pán)高度
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }

  _keyboardDidShow(e) {  // 獲取鍵盤(pán)高度
    this.setState({
      keyboardHeight: e.endCoordinates.height
    })
  }

  _keyboardDidHide(e) {
    this.setState({
      keyboardHeight: 0
    })
  }

  componentWillUnmount() {  // 移除監(jiān)聽(tīng)
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <KeyboardAvoidingView
          behavior='padding'
          style={{ flex: 1 }}
          keyboardVerticalOffset={-this.state.keyboardHeight}>
          <ScrollView>
            {
              Array(20).fill('').map((item, index) => (
                <TextInput
                  onChangeText={(text) => this.setState({ text })}
                  placeholder={`輸入框${index}`}
                  secureTextEntry={true}
                  value={this.state.text}
                />
              ))
            }
          </ScrollView>
        </KeyboardAvoidingView>
      </View >
    )
  }
}