当键盘可见时，底部内容覆盖主要内容

Question

当键盘可见时，我遇到了设备键盘主要内容和 bottom/footer 内容的问题。在这个例子中，我有 3 InpunTexts 作为屏幕的主要内容，底部有一个长文本（在原始来源中是公司徽标）。

import React from "react";
import { StyleSheet, View, Text, Button, TextInput } from "react-native";

const Tab1Screen = ({ route, navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
      </View>
      <View style={styles.bottom}>
        <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
  },
  input: {
    backgroundColor: "white",
    padding: 10,
    margin: 16,
    borderWidth: 1,
    borderColor: "black",
    height: 40,
    fontSize: 14,
    letterSpacing: 0,
    color: "black",
  },
});

export default Tab1Screen;

如果我尝试在一个 TextInput 中写东西，键盘就会出现，长文本会覆盖最后 2 TextInput 秒。如果我使用 BottomTabNavigator 选项卡仍然可见，因此可用内容较少。

这个问题可以解决吗？

Answer 1

如果您希望文本部分固定在底部：-

 <View style={styles.container}>
   <View style={styles.content}>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        </View>
        <Text>DUMMY TEXT</Text>

    </View>

并根据您的要求将 styles.content 的弹性样式更改为 0.9 或 0.8。

   styles.content { flex: 0.9 }

否则如果您不需要底部的文本部分，您可以简单地删除内容视图。

    <View style={styles.container}>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        <TextInput style={styles.input}/>
        <Text>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
         sed do eiusmod tempor incididunt ut labore et dolore magna nisi 
         ut aliquip 
        </Text>
    </View>

此外，如果您在屏幕中有多个文本输入，建议将它们包装在 keyboardAvoidingView 和 scrollView 中。

Answer 2

AvoidSoftInputView解决问题，非常好用

项目：https://github.com/mateusz1913/react-native-avoid-softinput

文档：https://mateusz1913.github.io/react-native-avoid-softinput/

当键盘可见时，底部内容覆盖主要内容

Bottom content covers the main content when keyboard is visible

react-native

react-native-flexbox

react-native-textinput

react-native-stylesheet