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.

``
ref={'keyboardView'}
style={styles.container}
contentContainerStyle={styles.content}
>

`

1. Bind onFocus for TextInput

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

2. send scroll event

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

$3

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

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


`

------

react-native-keyboard-avoiding-view

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

Usage

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

`
ref={'keyboardView'}
style={styles.container}
contentContainerStyle={styles.content}
>

`

1. TextInput 绑定 onFocus 事件

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

2. 发送滚动事件

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

$3

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

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


``

------