Skip to content

Latest commit

 

History

History
127 lines (86 loc) · 4.49 KB

中文说明.md

File metadata and controls

127 lines (86 loc) · 4.49 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={text}
                       onChangeText={text => this.setState({ text })}
                       multiline />
      	</InputScrollView>
    );
}

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

在 Android 中的多行 TextInput

如果你的 ReactNative 版本在 v0.57 或更高，请忽略这部分内容。

在 ReactNative 某个版本之前，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 });
};

Props

属性 类型 默认值 描述
topOffset number undefined InputScrollView 相对于窗口顶部的偏移量。当屏幕包含 TopBar 时，通常设置为 TopBar 的高度。如果未明确设置，程序会自动判断，但是可能会引起问题。 issues#43。
keyboardOffset number 40 当自动调整时，光标相对于键盘顶部的偏移量。
multilineInputStyle Style null 如果你的多行输入框有特定的样式，那么为了光标能够精准调整到键盘上方，应该将多行文本的样式也设置在这里，主要包含 fontSize、fontFamily、lineHeight 等会影响到光标位置的样式属性。注意，不要包含 width 和 height。
useAnimatedScrollView bool false 用 Animated.ScrollView 组件替换 ScrollView 组件。
supportHardwareKeyboard bool false beta 如果你的设备不使用软键盘，可以尝试使用此参数解决问题。 issues#69
keyboardAvoidingViewProps props null KeyboardAvoidingView 组件的 Props。详细请查阅: https://facebook.github.io/react-native/docs/keyboardavoidingview
...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