我是React Native的新手，所以我的问题可能对所有Maven来说都很愚蠢。我发现KeyboardAvoidingView在带有TextInput的屏幕上非常有用，但从昨天开始，我一直在努力正确放置它。
这是我的代码。我试着把组件放在一些不同的行，但都没有工作。我看到这个问题发生了。

组件键盘避免视图位于

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView,
} from "react-native";
import { FontAwesome5 } from "@expo/vector-icons";
import { COLOR } from "../../assets/variables";

export const OneTouchFilter = ({
  filteredByBoardType,
  selectedBoardType,
  setCityFromText,
  cityFromText,
  setCityToText,
  cityToText,
}) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>One Touch Filter</Text>
      {/* <KeyboardAvoidingView style={{ flex: 1 }} behavior="padding"> */}
        <View style={styles.mainContainer}>
          <TextInput
            style={styles.searchInputContainer}
            placeholder="Any city..."
            onChangeText={(text) => setCityFromText(text)}
            value={cityFromText}
          />
          <FontAwesome5
            style={{ marginHorizontal: 5 }}
            name="arrow-right"
            size={12}
            color="black"
          />
          <TextInput
            style={styles.searchInputContainer}
            placeholder="Any city..."
            onChangeText={(text) => setCityToText(text)}
            value={cityToText}
          />
          <View style={styles.btnsContainer}>
            <TouchableOpacity
              onPress={() => filteredByBoardType("NEED")}
              style={[
                { backgroundColor: COLOR.lightGreen },
                // selectedBoardType !== "GIVE" ? { opacity: 0.3 } : null,
                styles.btn,
              ]}
            >
              <Text style={{ color: COLOR.green }}>NEED</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => filteredByBoardType("GIVE")}
              style={[
                { backgroundColor: COLOR.lightBlue },
                // selectedBoardType !== "NEED" ? { opacity: 0.3 } : null,
                styles.btn,
              ]}
            >
              <Text style={{ color: COLOR.blue }}>GIVE</Text>
            </TouchableOpacity>
          </View>
        </View>
      {/* </KeyboardAvoidingView> */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginVertical: 20,
  },
  title: {
    fontSize: 10,
    color: COLOR.black,
    marginBottom: 5,
  },
  mainContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  searchInputContainer: {
    backgroundColor: COLOR.lightGrey,
    padding: 10,
    flex: 0.9,
    borderRadius: 5,
  },
  btnsContainer: {
    flexDirection: "row",
  },
  btn: {
    padding: 10,
    borderRadius: 5,
    marginLeft: 5,
  },
});

上述组件的父组件

import React, { useState, useEffect } from "react";
import {
  Button,
  View,
  Text,
  TouchableOpacity,
  FlatList,
  RefreshControl,
  StyleSheet,
} from "react-native";
import { fetchRides } from "../../functions";
import { RideCard } from "./RideCard";
import { OneTouchFilter } from "./OneTouchFilter";

export const HomeScreen = ({ navigation }) => {
  const [rides, setRides] = useState([]);
  const [selectedBoardType, setSelectedBoardType] = useState("");
  const [cityFromText, setCityFromText] = useState("");
  const [cityToText, setCityToText] = useState("");

  const filteredByBoardType = (boardType) => {
    if (boardType === selectedBoardType) {
      setSelectedBoardType("");
    } else {
      setSelectedBoardType(boardType);
    }
  };

  useEffect(() => {
    fetchRides(setRides, selectedBoardType, cityFromText, cityToText);
  }, [setRides, selectedBoardType, cityFromText, cityToText]);

  return (
    <View style={styles.container}>
      <FlatList
        data={rides}
        renderItem={(itemData) => (
          <RideCard
            ride={itemData.item}
            index={itemData.index}
            id={itemData.item.id}
            numOfRides={rides.length}
          />
        )}
      />
      <OneTouchFilter
        filteredByBoardType={filteredByBoardType}
        selectedBoardType={selectedBoardType}
        setCityFromText={setCityFromText}
        cityFromText={cityFromText}
        setCityToText={setCityToText}
        cityToText={cityToText}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFF",
    padding: 20,
    paddingBottom: 0,
  },
  filterContainer: {
    backgroundColor: "#F5F5F5",
    padding: 10,
    borderRadius: 5,
    marginTop: 15,
  },
});

上述组件的父App.js组件。

import React from "react";
import { StyleSheet } from "react-native";
import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { HomeScreen } from "./screens/Home/HomeScreen";
import { PostScreen } from "./screens/Post/PostScreen"; 
import { ProfileScreen } from "./screens/Profile"; 
import Ionicons from "react-native-vector-icons/Ionicons"; 
import { NativeBaseProvider } from "native-base";

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: "white",
  },
};

export default function App() {
  const Stack = createStackNavigator();
  // タブ移動の設定を新規追加
  // createBottomTabNavigator ... タブ移動を設定する関数
  const Tab = createBottomTabNavigator();

  // 新規追加
  // - 移動を関数に持たせて、タブ移動の設定で利用
  // - 意図 ... タブ移動の箇所のコードが読みにくくなるため
  const Home = () => {
    return (
      <Stack.Navigator>
        <Stack.Screen
          options={{ headerShown: false }}
          name="Home"
          component={HomeScreen}
        />
      </Stack.Navigator>
    );
  };

  const Post = () => {
    return (
      <Stack.Navigator
        headerMode="screen"
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Post" component={PostScreen} />
        {/* <Stack.Screen name="詳細" component={DetailsScreen} /> */}
      </Stack.Navigator>
    );
  };

  const Profile = () => {
    return (
      <Stack.Navigator
        headerMode="screen"
        screenOptions={{ headerShown: false }}
        >
        <Stack.Screen name="Profile" component={ProfileScreen} />
        {/* <Stack.Screen name="詳細" component={DetailsScreen} /> */}
      </Stack.Navigator>
    );
  };

  return (
    // Tab switcher
    <NativeBaseProvider>
      <NavigationContainer theme={MyTheme}>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;
              // icon swithcer which depends on the route name
              if (route.name === "Home") {
                iconName = focused ? "ios-home" : "ios-home";
              } else if (route.name === "Post") {
                iconName = focused ? "ios-add" : "ios-add";
              } else if (route.name === "Profile") {
                iconName = focused ? "md-person" : "md-person";
              }
              return <Ionicons name={iconName} size={size} color={color} />;
            },
          })}
          tabBarOptions={{
            activeTintColor: "rgb(0, 110, 182)",
            inactiveTintColor: "gray",
          }}
        >
          <Tab.Screen name="Home" component={Home} />
          <Tab.Screen name="Post" component={Post} />
          <Tab.Screen name="Profile" component={Profile} />
        </Tab.Navigator>
      </NavigationContainer>
    </NativeBaseProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});