解决方法
-
引入 Keyboard
import {Keyboard} from "react-native"
-
在组建加载完毕时,监听键盘展示、隐藏事件。动态设置键盘高度。
// 定义 state
const [keyboardHeight, setKeyboardHeight] = useState(0);
// 组建加载完毕时监听事件
useEffect(() => {
Keyboard.addListener("keyboardDidShow", e => {
setKeyboardHeight(e.endCoordinates.height);
});
Keyboard.addListener("keyboardDidHide", e => {
setKeyboardHeight(0);
});
return () => {
// 组建卸载时,移除事件监听
Keyboard.removeAllListeners("keyboardDidShow", "keyboardDidHide");
}
}, [])
- 根据是否弹出软件盘动态设计ScrollView的高度
<ScrollView style={{width: screenWidth, height: screenHeight - keyboardHeight}}>
<View>
<TextInput />
<TextInput />
{...}
</View>
</ScrollView>
效果图
注:
- 人物输入框在软件盘弹出之后会定位到键盘上方,比较舒服的滚动逻辑。
- 效果图是实际项目应用的效果,scrollview 默认高度不是屏幕高度。
说明
- React Native 版本:0.66;
- 官方提供的避免遮挡的KeyboardAvoidingView,并不好用,效果较差;
- 第三方组件库也尝试过,很多都是旧版本了,尝试使用没有成功;
- 这个方法可能只适用于当前这种情况,我这里给大家提供解决这种情况的一种方法,可能有点取巧,而且经过测试大部分情况下都会没问题的,打包之后情况应该会好更多。