[英]ReactNative : Getting white space between keyboard and comment-box input field
I am getting white space between the keyboard and input box.我在键盘和输入框之间出现空白。 I have used KeyBoardAvoiding view in my code.
我在我的代码中使用了 KeyBoardAvoiding 视图。
Here is the piece of code :这是一段代码:
const [isKeyboardVisible, setKeyboardVisible] = useState(false);
const [offsetValue, setOffsetValue] = useState(0);
useEffect(() => {
const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => {
setKeyboardVisible(true);
});
const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
setKeyboardVisible(false);
});
if (appState === "active") {
isKeyboardVisible && Keyboard.dismiss();
}
return () => {
keyboardDidHideListener.remove();
keyboardDidShowListener.remove();
};
}, []);
useEffect(() => {
if (isKeyboardVisible) {
setOffsetValue(0);
} else {
setOffsetValue(80);
}
}, [isKeyboardVisible]);
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
keyboardVerticalOffset={Platform.OS === "ios" ? offsetValue : 0}
>
<ScrollView
contentContainerStyle={styles.scrollViewContainer}
alwaysBounceVertical={false}
keyboardShouldPersistTaps={"handled"}
>
<View style={styles.chatInputBoxWrapper}>
<AvyCommentLinearInput
inputRef={props.setInputRef}
value={props.inputValue}
isVideoCaptureEnabled={true}
imageUrl={""}
onSubmit={(value) => props.onChatSubmit(value)}
/>
</View>
</ScrollView>
</KeyboardAvoidingView>
export default StyleSheet.create({
scrollViewStyle: {
marginHorizontal: 16,
borderRadius: 4,
marginBottom: 8,
marginTop: 8,
},
chatInputBoxWrapper: {
...shadowStyle,
flex: 1,
},
scrollViewContainer: { flexGrow: 1 },
});
Video link of the issue I am facing: https://www.dropbox.com/s/6ydwxhaq06dpfaf/RPReplay_Final1674132226.MP4?dl=0我面临的问题的视频链接: https://www.dropbox.com/s/6ydwxhaq06dpfaf/RPReplay_Final1674132226.MP4?dl=0
Any help would be Appreciated!!!任何帮助,将不胜感激!!!
My recommendation - use React Native Avoid SoftInput https://mateusz1913.github.io/react-native-avoid-softinput/我的建议 - 使用 React Native 避免 SoftInput https://mateusz1913.github.io/react-native-avoid-softinput/
A lot of examples https://github.com/mateusz1913/react-native-avoid-softinput/tree/main/packages/app/src/screens例子很多https://github.com/mateusz1913/react-native-avoid-softinput/tree/main/packages/app/src/screens
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.