TextInput 在 React Native 中的鍵盤下消失

Question

我正在制作一個反應本機應用程序，由於某種原因，當我點擊文本輸入以鍵入一些內容時，它會在鍵盤下消失。 我希望它像 Instagram Messenger 和其他 Messenger 應用程序那樣位於鍵盤頂部。 我嘗試使用keyboardAvoidView 並將行為設置為填充和高度，但都沒有奏效。

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;

Answer 1

您必須使用 react native 提供的KeyboardAvoidingView組件。

    <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>

Answer 2

對於這些情況，我們可以使用以下方法之一：

1.用<ScrollView></ScrollView>包裝組件

2.用<KeyboardAvoidingView></KeyboardAvoidingView>包裹組件

有時我們給定的錯誤 styles 也會導致這些情況發生，例如：為我們的 styles 設置一個固定值，檢查您的邊距並使用給定的方法之一

我希望它有幫助

Answer 3

嘗試使用 keyboardVerticalOffset 並使用不同的值對其進行測試。

有關更多信息，請查看

Answer 4

對於那些想要保持代碼干凈的人，只需使用 FlatList 組件並添加一個涉及該組件的 View 組件，其狀態為：{flex: 1, height: Dimensions.get ("window")。 高度}。

下面留下了一個組件供任何想要使用的人使用，只需以這種方式包裝您的組件：

<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