模板版本：v0.4.0

`react-native-input-scroll-view`

本项目基于 [react-native-input-scroll-view](https://github.com/baijunjie/react-native-input-scroll-view) 开发。

[Github 地址](https://github.com/react-native-oh-library/react-native-input-scroll-view)

请到三方库的 Releases 发布地址查看配套的版本信息：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-input-scroll-view	~ 1.12.0	Github	0.77/0.82	否	API12+	1.11.0	Npm Address
@react-native-oh-tpl/react-native-input-scroll-view	~ 1.11.0-0.0.1	Github	0.72	否	API12+	1.11.0	Npm Address

对于未发布到npm的旧版本，请参考安装指南安装tgz包。

安装与使用

进入到工程目录并输入以下命令：

npm

 # 0.72 
npm install @react-native-oh-tpl/react-native-input-scroll-view 
 
 
 # 0.77/0.82
npm install @react-native-ohos/react-native-input-scroll-view

yarn

 # 0.72 
yarn add @react-native-oh-tpl/react-native-input-scroll-view 
 
 
 # 0.77/0.82
yarn add @react-native-ohos/react-native-input-scroll-view

下面的代码展示了这个库的基本使用场景：

使用时 import 的库名不变。

import React, { useState } from 'react';
import { StyleSheet, TextInput, View, TouchableOpacity, Text } from 'react-native';
import InputScrollView from 'react-native-input-scroll-view';


const keyboardOffsetInput = () => {
    const [text, setText] = useState('');
    return (
        <View style={styles.container}>
            <InputScrollView  keyboardOffset={100}>
                <View style={styles.placeholder} />
                <TextInput style={styles.input}
                    value={text}
                    multiline
                    onChangeText={setText}
                />
            </InputScrollView>
        </View>
    );
}


const styles = StyleSheet.create({
    container: {
        backgroundColor: '#EEE',
    },
    placeholder: {
        height: 400,
        justifyContent: 'center',
        alignItems: 'center',
      },
    input: {
        margin: 20,
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderColor: 'gray',
        borderWidth: 1,
        backgroundColor: '#FFF',
    },
});

export default keyboardOffsetInput;

约束与限制

兼容性

本文档内容基于以下版本验证通过：

RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18;
RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112;
RNOH: 0.82.22; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.878; ROM: 6.0.0.130;

属性

"Platform"列表示该属性在原三方库上支持的平台。

"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

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

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。