[英]TextInput disappears under keyboard in React Native
I am making a react native app and for some reason when I tap on the text input to type something it disappears under the keyboard.我正在制作一个反应本机应用程序,由于某种原因,当我点击文本输入以键入一些内容时,它会在键盘下消失。 I want it to come to the top of the keyboard like the way Instagram messenger and other messenger apps do it.
我希望它像 Instagram Messenger 和其他 Messenger 应用程序那样位于键盘顶部。 I tried using keyboardAvoidView and setting the behavior to padding and height but none of it worked.
我尝试使用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;
You must KeyboardAvoidingView
component provided by react native.您必须使用 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>
For these situations we can use one of these methods:对于这些情况,我们可以使用以下方法之一:
1.wrapping Component with <ScrollView></ScrollView>
1.用
<ScrollView></ScrollView>
包装组件
2.wrapping Component with <KeyboardAvoidingView></KeyboardAvoidingView>
2.用
<KeyboardAvoidingView></KeyboardAvoidingView>
包裹组件
Sometimes our wrong given styles can make these happens too such as: Having a fixed value for our styles , check your margins and use one of the given methods有时我们给定的错误 styles 也会导致这些情况发生,例如:为我们的 styles 设置一个固定值,检查您的边距并使用给定的方法之一
I hope it helps我希望它有帮助
For those who want to keep the code clean, just use the FlatList component and add a View component involving the component with the states: {flex: 1, height: Dimensions.get ("window").对于那些想要保持代码干净的人,只需使用 FlatList 组件并添加一个涉及该组件的 View 组件,其状态为:{flex: 1, height: Dimensions.get ("window")。 Height}.
高度}。
Below left a component ready for anyone who wants to use, just wrap your component in this way:下面留下了一个组件供任何想要使用的人使用,只需以这种方式包装您的组件:
<FormLayout>
{... your component}
</FormLayout>
Here is the solver component:这是求解器组件:
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.