最近在專案中，使用TextInput元件的時候，發現鍵盤彈出的時候，遮蓋了表單。

諮詢了下做iOS的同學，他們的處理是計算鍵盤的高度和當前輸入域的位置，將介面向上移動一段距離。

那在ReactNative中是否也可以有類似的處理方法呢？

答案是肯定的，我們使用ScrollVIew的scrollTo方法，我們也主要是講這種方法。

具體方案如下：

元件render方法中使用ScrollView，並且設定scrollview的keyboardShouldPersistTaps={true}

keyboardShouldPersistTaps bool    預設值為false。

當此屬性為false的時候，在軟鍵盤啟用之後，點選焦點文字輸入框以外的地方，鍵盤就會隱藏。
如果為true，滾動檢視不會響應點選操作，並且鍵盤不會自動消失。

在scrollview中用一個view作為container包裹所有剩餘的子檢視，比如Text，TouchableHighlight之類的；
並且用onStartShouldSetResponderCapture擷取該view的事件，用以解決當點選頁面上的按鈕時，第一次點選只會收起鍵盤，第二次點選才會響應按鈕方法的bug。
然後在TextInput的onFocus方法中滾動scrollview，在onEndEditing中恢復scrollview的滾動。

具體的程式碼如下：

在render方法裡定義一個ScrollView，在ScrollView中有一個子View。

   <ScrollView ref='scroll' keyboardShouldPersistTaps={true} >
     <View onStartShouldSetResponderCapture={(e) => {
 	let target = e.nativeEvent.target;
 	if (target !== ReactNative.findNodeHandle(this.refs.hour) ) {
　		this.refs.hour.blur();
 	}
     }}>
     </View>
   </ScrollView>
 

                <TextInput
                  style={styles.ksValueView}
                  maxLength={2}
                  placeholder="0"
                  placeholderTextColor="#b2b2b2"
                  multiline={false}
                  onChangeText={this.changeHour.bind(this)}
                  keyboardType="numeric"
                  ref = 'hour'
                  onFocus={this.scrollViewTo.bind(this)}
                  onEndEditing={()=>{this.refs.scroll.scrollTo({y:0,x:0,animated:true})}}
                  />
 

onFocus方法中滾動scrollview，在onEndEditing中恢復scrollview的滾動。

    scrollViewTo(e){
　　　　let target = e.nativeEvent.target;
　　　　let scrollLength = 0;//初始值
　　　　if (target=== ReactNative.findNodeHandle(this.refs.hour)) {
　　　　　　scrollLength = 216;
　　　　}
　　　　this.refs.scroll.scrollTo({y:scrollLength,x:0});
　　 }

還有其他的解決方案可參考（沒有經過驗證）：

如果你有更好的方案，歡迎留言交流。