react-native-keyboard-avoiding-view

(中文版本请参看这里)

iOS Keyboard Avoiding View. Focus view will slide on the window, to prevent rolling to the outside of the screen

Usage

react-native-keyboard-avoiding-view use like ScrollView.

<KeyboardAvoidingView 
    ref={'keyboardView'}
    style={styles.container} 
    contentContainerStyle={styles.content}
>
</KeyboardAvoidingView>

1. Bind onFocus for TextInput

   <TextInput
       ref={'secondView'}
       onFocus={() => this.onFocus(this.refs.secondView)}
   />
   

2. send scroll event

   onFocus = (focusView) => {
       const keyboardView = this.refs.keyboardView;
       keyboardView.focusViewOnFocus(focusView);
   }
   

extension

focusView can be use any view. If use super view, animate will scroll with super view.

<KeyboardAvoidingView 
    ref={'keyboardView'}
    style={styles.container} 
    contentContainerStyle={styles.content}
>
    <View 
        style={styles.bigView}
        ref={'firstView'}
    >
        <TextInput
            style={styles.textInput}
            onFocus={() => this.onFocus(this.refs.firstView)}
        />
    </View>
</KeyboardAvoidingView>

---

react-native-keyboard-avoiding-view

作为系统 KeyboardAvoidingView 的扩展类，实现键盘弹起后自动滚动到TextInput位置，解决ios键盘弹起后输入框被遮盖问题。

Usage

react-native-keyboard-avoiding-view 使用方式与 ScrollView 相同.

<KeyboardAvoidingView 
    ref={'keyboardView'}
    style={styles.container} 
    contentContainerStyle={styles.content}
>
</KeyboardAvoidingView>

1. TextInput 绑定 onFocus 事件

   <TextInput
       ref={'secondView'}
       onFocus={() => this.onFocus(this.refs.secondView)}
   />
   

2. 发送滚动事件

   onFocus = (focusView) => {
       const keyboardView = this.refs.keyboardView;
       keyboardView.focusViewOnFocus(focusView);
   }
   

扩展

发送滚动事件时，focusView 能够传递任何view。如果传入的是TextInput的包裹view，滚动时将会按照传入的view的大小和坐标滚动。

<KeyboardAvoidingView 
    ref={'keyboardView'}
    style={styles.container} 
    contentContainerStyle={styles.content}
>
    <View 
        style={styles.bigView}
        ref={'firstView'}
    >
        <TextInput
            style={styles.textInput}
            onFocus={() => this.onFocus(this.refs.firstView)}
        />
    </View>
</KeyboardAvoidingView>

---