Je fais une application autochtone réagissante et pour une raison quelconque lorsque je passe sur la saisie de texte pour taper quelque chose, il disparaît sous le clavier. Je veux que cela vienne au sommet du clavier, comme la façon dont l'Instagram Messenger et d'autres applications Messenger le font. J'ai essayé d'utiliser KeyboardavoidView et de définir le comportement sur le rembourrage et la hauteur, mais rien de tout cela n'a fonctionné.
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;
4 Réponses :
Vous devez KeyboardavoidingView Composant fourni par React Native.
J'ai testé ici et ça marche. snack.expo.io/5ozuk65gx
De ce que j'ai découvert le problème est dans le conteneur d'entrée
J'ai ajouté un lien pour tester ma réponse. sans changer. et fonctionne.
Pour ces situations, nous pouvons utiliser l'une de ces méthodes:
1. Composant d'enfoncement avec 2. Composant d'enfoncement avec Parfois, nos mauvais styles donnés peuvent faire cela aussi, comme: ayant une valeur fixe pour nos styles , vérifiez vos marges et utilisez l'une des méthodes données
J'espère que cela aide
Essayez d'utiliser KeyboardPerticalOffsetSet et testez-le avec différentes valeurs.
Pour plus d'informations Vérifiez Ceci out
Pour ceux qui veulent garder le code propre, utilisez simplement le composant plat et ajoutez une composante de vue impliquant le composant avec les états: {flex: 1, hauteur: dimensions.get ("fenêtre"). Hauteur}.
ci-dessous laissé un composant prêt pour tous ceux qui souhaitent utiliser, enveloppez simplement votre composant de cette manière: p> Voici le composant de solveur: P > 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