我的界面布局包括一个ScrollView和一个底部栏。当键盘没有打开时,我需要底部栏始终可见:
https://snack.expo.io/@jamesweblondon/privileged-cashew1
这在iOS上运行得很好。当键盘打开时,您将不再看到页脚: 然而,在Android上,页脚会移动到键盘上面: 我能停止这种行为吗? 我尝试使用键盘事件,但是
export default function App() {
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.content}>
<TextInput style={styles.input} value={"Text Input"} />
</ScrollView>
<View style={styles.footer}>
<Text>Footer</Text>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
content: {
backgroundColor: "tomato",
padding: 50,
},
input: {
backgroundColor: "grey",
padding: 50,
},
footer: {
backgroundColor: "green",
padding: 50,
},
});
这在iOS上运行得很好。当键盘打开时,您将不再看到页脚: 然而,在Android上,页脚会移动到键盘上面: 我能停止这种行为吗? 我尝试使用键盘事件,但是
keyboardWillShow
和keyboardWillHide
在Android上不受支持。 如果我使用keyboardDidShow
和keyboardDidHide
,则延迟意味着页脚可见,因为键盘向上和向下动画,这感觉很卡和不愉快。export default function App() {
const [keyboardIsOpen, setKeyboardIsOpen] = React.useState(false);
Keyboard.addListener("keyboardDidShow", () => {
setKeyboardIsOpen(true);
});
Keyboard.addListener("keyboardDidHide", () => {
setKeyboardIsOpen(false);
});
return (
<SafeAreaView style={styles.container}>
<ScrollView style={styles.content}>
<TextInput style={styles.input} value={"Text Input"} />
</ScrollView>
{!keyboardIsOpen && (
<View style={styles.footer}>
<Text>Footer</Text>
</View>
)}
</SafeAreaView>
);
}
我也无法通过KeyboardAvoidingView
使其工作。 我正在使用Expo。