在 React Native 中，当键盘在 Android 上打开时隐藏 ScrollView 下的组件？

Question

我的布局是页脚上方的 ScrollView。当键盘未打开时，我需要页脚始终在屏幕上可见：

https://snack.expo.io/@jamesweblondon/privileged-cashew1

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 上，页脚移动到键盘上方：

我可以阻止这种行为吗？我尝试过使用键盘事件，但Android 不支持keyboardWillShow。keyboardWillHide如果我使用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. 我正在使用世博会。

Answer 1

android:windowSoftInputMode已在EXPO中提供

这是演示： https: //snack.expo.io/@nomi9995/01d462

你应该给容器完整的高度而不是 flex:1

代码：

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  SafeAreaView,
  TextInput,
  Dimensions
} from "react-native";

const height = Dimensions.get("window").height;
export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.content}>
      <View style={{flex:1}}>
        <TextInput style={styles.input} value={"Text Input"} />
        </View>
      </ScrollView>

      <View style={styles.footer}>
        <Text>Footer</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    height: height
  },
  content: {
    backgroundColor: "tomato",
    padding: 50,
  },
  input: {
    backgroundColor: "grey",
    padding: 50,
  },
  footer: {
    backgroundColor: "green",
    padding: 50
  },
});