我是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",
},
});
1条答案
按热度按时间xriantvc1#
您可以在主屏幕中添加KeyboardAvoidingView,而不是OneTouchFilter