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

我能停止这种行为吗？ 我尝试使用键盘事件，但是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。

- Evanss

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
  },
});

- Muhammad Numan

---

这个确实可以工作。可惜你必须手动设置高度。我正在与React Native Web共享组件，因此使用JavaScript进行布局并不是很好。 - Evanss

这是我的问题，我没有告诉你完整的需求。我将这段代码分享给Android和iOS，还有在Expo中使用React Native Web来进行web开发。在网站上最好不要使用JavaScript进行布局，但是在这种情况下可能是必须的。如果需要JavaScript，我会接受您的答案，但更好的解决方案是不使用JavaScript。谢谢。 - Evanss

@Evanss，是的，你说得对，我们不应该使用JS来进行布局，但在我们的情况下，这里需要使用JavaScript，因为flex:1在Web上使用display："flex"，这意味着页脚将不会被隐藏，并且键盘只会出现在设备上而不是Web浏览器上，我们还可以通过使用React-Native的平台API来为Web制作单独的解决方案。 - Muhammad Numan

让我们在聊天中继续这个讨论。 - Evanss

@Evanss 我在聊天中留言了，但我没有收到你的消息通知。 - Muhammad Numan

Answer 2

我找到了一个现成的npm包，你可以安装并使用它。

从https://www.npmjs.com/package/react-native-hide-with-keyboard安装。

你只需要在想要隐藏的组件上覆盖<HideWithKeyboard>即可，例如：

<HideWithKeyboard>
    <Footer>
    <FooterTab>
    ...More Content Here...
    </FooterTab>
    </Footer>
</HideWithKeyboard>

- Hemal

---

这个软件包似乎不再起作用了。 - Ice_mank

谢谢。我已经尝试了所有的键盘避免/注意包...这是唯一对我有效的东西（与Expo Go一起工作）。它确切地做了逻辑上正确的事情...谢谢！ - Kevin Marmet

Answer 3

为了处理这个问题，你可以在代码级别将页脚的显示属性设置为absolute和bottom:0。

如果你想特别针对安卓设备保持页脚在底部，你可以在清单文件中设置windowSoftInputMode。在<application>标签内并且在<activity>块下添加以下属性： android:windowSoftInputMode="adjustResize" 然后重新构建安卓应用，如果这仍然不起作用，你也可以将其设置为 android:windowSoftInputMode="adjustPan"

- Imjaad

---

绝对定位无法解决这个问题。 我使用Expo，因此我认为android：windowSoftInputMode =“adjustResize”已经设置好了: https://forums.expo.io/t/how-to-set-android-windowsoftinputmode-adjustresize-in-android-manifest-file/587 - Evanss

Answer 4

对我来说，React-Native版本0.61.2是可行的。

android:windowSoftInputMode="adjustPan"

- Menon Hasan