Javascript 文本输入消失在React Native中的键盘下

我正在制作一个react本机应用程序，由于某种原因，当我点击文本输入以键入某些内容时，它会消失在键盘下。我希望它能像Instagram messenger和其他messenger应用程序一样，出现在键盘顶部。我尝试使用keyboardAvoidView并将行为设置为padding和height，但都不起作用

import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
  TextInput,
  TouchableOpacity,
} from "react-native";
import CommunityPost from "../components/CommunityPost";
import { Context as CommunityContext } from "../context/CommunityContext";

const Key = ({ navigation }) => {
  const { createCommunityPost, errorMessage } = useContext(CommunityContext);
  const [body, setBody] = useState("");


  return (
    <View style={styles.container}>
      <SafeAreaView />

      <CommunityPost />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          multiline={true}
          placeholder="Type..."
          placeholderTextColor="#CACACA"
          value={body}
          onChangeText={setBody}
        />
        <TouchableOpacity
          style={{ justifyContent: "center", flex: 1, flexDirection: "row" }}
          onPress={() => createCommunityPost({ body })}
        >
          <Text style={styles.sendText}>Send</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "flex-start",
    backgroundColor: "#2B3654",
    justifyContent: "flex-end",
  },
  inputContainer: {
    justifyContent: "flex-end",
    flexDirection: "row",
  },
  sendText: {
    color: "white",
    fontSize: 25,
  },
  input: {
    fontSize: 25,
    color: "white",
    borderColor: "#2882D8",
    borderWidth: 1,
    borderRadius: 15,
    width: "80%",
    marginBottom: 30,
    marginLeft: 10,
    padding: 10,
  },
});

export default Key;

您必须使用键盘避免查看react native提供的组件

    <KeyboardAvoidingView
      behavior={Platform.OS == "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <SafeAreaView />

      <CommunityPost />
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          multiline={true}
          placeholder="Type..."
          placeholderTextColor="#CACACA"
          value={body}
          onChangeText={setBody}
        />
        <TouchableOpacity
          style={{ justifyContent: "center", flex: 1, flexDirection: "row" }}
          onPress={() => createCommunityPost({ body })}
        >
          <Text style={styles.sendText}>Send</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>

---

对于这些情况，我们可以使用以下方法之一：

1.用塑料包装组件

2.用塑料包装组件

有时，我们错误的给定样式也会导致这种情况发生，例如：为样式设置固定值，检查您的边距并使用给定的方法之一

---

我希望它有帮助

尝试使用键盘垂直偏移量，并使用不同的值进行测试

---

有关更多信息，请检查

对于那些希望保持代码整洁的人，只需使用FlatList组件并添加一个视图组件，该组件的状态为：{flex:1，height:Dimensions.get window.height}

下面是一个组件，可供任何想要使用的人使用，只需以这种方式包装您的组件即可：

<FormLayout>
    {... your component}
</FormLayout>

以下是解算器组件：

import React from 'react'
import { View, StyleSheet, FlatList, Dimensions } from 'react-native'

import Background from './Background'

const FormLayout = ({ children }) => {

    const renderContent = <View style={styles.container}>
          {children}
    </View>

    return <FlatList 
        ListHeaderComponent={renderContent}
        showsVerticalScrollIndicator={false}
    />
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: Dimensions.get('window').height * 0.95
    }
})

export default FormLayout

---

我在这里测试了它，它可以工作。从我发现的问题是在输入容器中，我添加了链接来测试我的答案。没有改变。而且有效。