Skip to content

Latest commit

 

History

History
126 lines (89 loc) · 4.14 KB

中文说明.md

File metadata and controls

126 lines (89 loc) · 4.14 KB
Raw

react-native-input-scroll-view npm version

主要是为了解决以下问题：

  • 当键盘弹出时，TextInput 会自动调整到键盘上方。
  • 当键盘弹出后，ScrollView 中的内容不会被键盘遮挡。
  • 当多行 TextInput 获得焦点时，选中行的光标会自动调整到键盘上方。
  • 当多行 TextInput 换行时，新行会自动调整到键盘上方。
  • 手指放在 TextInput 上方并滑动 ScrollView，当手指抬起，不会使 TextInput 获得焦点。

    

安装

npm

$ npm install react-native-input-scroll-view --save

yarn

$ yarn add react-native-input-scroll-view

使用

import InputScrollView from 'react-native-input-scroll-view';
...
state = {
    text: '',
};

render() {
    const { text } = this.state;
    return (
        <InputScrollView>
            <TextInput />
            <TextInput />
            <TextInput value={this.state.text}
                       onChangeText={text => this.setState({ text })}
                       multiline />
      	</InputScrollView>
    );
}

注意，如果要实现光标精准调整到键盘上方，就必须为 TextInput 绑定 value。

在 Android 中的多行 TextInput

由于在 Android 中，多行 TextInput 的高度不能根据其内容正确的变化，因此我们需要添加额外的处理代码

import InputScrollView from 'react-native-input-scroll-view';
...

state = {
    text: '',
    textareaHeight: null,
};

render() {
    const { text, textareaHeight } = this.state;
    return (
        <InputScrollView>
            <TextInput />
            <TextInput />
            <TextInput style={{ height: textareaHeight }}
                       value={text}
                       onChangeText={text => this.setState({ text })}
                       onContentSizeChange={this._onContentSizeChange}
                       multiline />
      	</InputScrollView>
    );
}

_onContentSizeChange = ({nativeEvent:event}) => {
    this.setState({ textareaHeight: event.contentSize.height });
};

移除键盘监听

插件通过注册键盘监听器来工作。如果这时有其它包含输入框的屏幕进入，而当前屏幕中的组件并没有被卸载时，可能会发生错误 #15，这时必须手动删除监听器。当组件正常卸载时（componentWillUnmount被正常执行），你不需要这样做。

可以通过获取组件引用来删除监听器:

<InputScrollView ref={(ref) => { this.inputScrollView = ref }}>
this.inputScrollView._removeListener()

Props

属性 类型 默认值 描述
keyboardOffset   number 40 当自动调整时，光标相对于键盘顶部的偏移量。
multilineInputStyle     Style { fontSize: 17 } 如果你的多行输入框有特定的样式，那么为了光标能够精准调整到键盘上方，应该将多行文本的样式也设置在这里，主要包含 fontSize、fontFamily、lineHeight 等会影响到光标位置的样式属性。注意，不要包含 width 和 height。
useAnimatedScrollView bool false 用 Animated.ScrollView 组件替换 ScrollView 组件。
...ScrolView.props props 继承 ScrollView 组件的所有属性。详细请查阅: https://facebook.github.io/react-native/docs/scrollview.html

ENV

"react": "^16.0.0-alpha.12"
"react-native": ">=0.46.0"

Produt case

App_Store

License

MIT