React native 在Android上以React Native打开键盘时，是否在滚动视图下隐藏组件？

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

---

我也无法使用

键盘AvoidingView

。我正在使用Expo。

要在代码级别处理此问题，可以将页脚显示属性设置为

absolute

和

bottom:0

如果您想将页脚保留在android的底部，可以在清单文件中设置

windowSoftInputMode

。在

块内和

块下添加以下属性

android:WindowsOfInputMode=“adjustResize”

然后为android重新构建应用程序，如果仍然不起作用，您也可以将其设置为

---

android:windowSoftInputMode=“adjustPan”

android:windowSoftInputMode已在

以下是演示：

您应该为容器指定完整的高度，而不是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
  },
});

从“React”导入React；
进口{
样式表，
文本，
看法
滚动视图，
安全区域视图，
文本输入，
尺寸
}从“反应本族语”；
常量高度=尺寸。获取（“窗口”）。高度；
导出默认函数App（）{
返回(
页脚
);
}
const styles=StyleSheet.create({
容器：{
高度：高度
},
内容：{
背景颜色：“西红柿”，
填充：50，
},
输入：{
背景颜色：“灰色”，
填充：50，
},
页脚：{
背景颜色：“绿色”，
填充：50
},
});

---

它适用于React本机版本：0.61.2的我

android:windowSoftInputMode="adjustPan"

---

我发现这个准备好了的

npm

包。您可以安装并使用它

安装自

您只需使用

覆盖要隐藏的组件，例如

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

…这里有更多内容。。。

Position绝对位置恐怕不行。我正在使用Expo，所以我认为android:WindowsOfInputMode=“adjustResize”已经设置好了：这确实有效。很遗憾，你必须手动设置高度。我正在与React Native Web共享组件，因此使用JavaScript进行布局不是很好。@Evans抱歉，我为android制定了一个解决方案，因为你在问题中提到了android。这是我的错，我没有告诉你全部要求。我与Android和iOS共享此代码，也与React Native web（在Expo内）共享此代码。在web上，如果不能使用JavaScript进行布局会更好，但在这种情况下可能是必要的。如果需要JavaScript，我会接受你的回答，但是更好的解决方案是不使用JavaScript。Thanks@Evanss是的，你是对的，我们不应该在布局中使用JS，但在我们的例子中，javascript是必需的，因为flex:1使用的是display:“flex”在web上，这意味着页脚不会被隐藏，键盘只会出现在设备上，而不会出现在web浏览器上。我们还可以使用react Native的平台API为web提供单独的解决方案。同样的问题也发生在我的iPhone上的Safari上，所以这种web布局可能确实需要JavaScript。这是一个耻辱，但对我来说，用户体验更重要。

android:windowSoftInputMode="adjustPan"

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