Le clavier React Native pousse tout et je n'ai aucun contrôle

Question

Lorsque le clavier est ouvert, je veux seulement que la saisie du commentaire monte, mais tout monte

export default function DetailsPage({ route, navigation }) {
  const { title, detail, degree } = route.params;
  const [comment, setComment] = useState("")
  return (
    <ScrollView style={{flex:1}}>
    <View style={{ height: responsiveHeight(100), paddingTop: StatusBar.currentHeight }} >
    
      <ImageBackground blurRadius={0} source={require('../assets/bgg.jpg')} resizeMode="cover" >
        <View style={{ height: responsiveHeight(35), borderWidth: 1 }}>
          <View style={{ width: responsiveWidth(80), height: responsiveHeight(15), justifyContent: 'space-around', alignSelf: 'center', marginTop: 40 }}>
            <Text style={{ fontFamily: 'Inter-Bold', fontSize: 18 }}>Example</Text>
            <Text numberOfLines={3} style={{ fontFamily: 'Roboto-Medium' }}></Text>
          </View>
        </View>
      </ImageBackground>


      <View style={{ paddingHorizontal: responsiveWidth(10), paddingVertical: responsiveWidth(10), height: responsiveHeight(65), borderWidth: 1, borderTopLeftRadius: 40, borderTopRightRadius: 40, marginTop: -responsiveHeight(10), backgroundColor: 'white' }}>
        <View style={{ height: responsiveHeight(50), borderWidth: 1 }}>
          <CommentCard></CommentCard>
        </View>
      </View>
      
      <KeyboardAvoidingView >
        <View style={{height:responsiveHeight(10),backgroundColor:'white'}}>
          <InputComp></InputComp>
        </View>
      </KeyboardAvoidingView>
      
    </View>
    </ScrollView>
  );
}

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

J'ai essayé "softwareKeyboardLayoutMode": "pan", solution J'ai essayé KeyboardAvoidingView et KeyboardVerticalOffset partout mais je ne trouve pas de solution J'ai essayé la vue déroulante, éviter la vue avec ou sans clavier

Answer 1

Vous pouvez essayer d'ajouter ces trois éléments dans votre code.

1. Ajoutez un KeyboardAvoidingView autour du composant InputComp.

2. Définissez la propriété de comportement de KeyboardAvoidingView sur "padding".

3. Définissez la propriété de style de KeyboardAvoidingView sur {height : Hauteur réactive (10), couleur d'arrière-plan : 'blanc'}.

   export default function DetailsPage({ route, navigation }) {
   const { title, detail, degree } = route.params;
   const [comment, setComment] = useState("")
   return (
   
   
         
   
     
       Example
       
     
     
     
     
       
         
       
     
   
     
       
     
   
   
   
   );
   }
   
     const styles = StyleSheet.create({
     container: {
     flex: 1,
     backgroundColor: '#fff',
     alignItems: 'center',
     justifyContent: 'center',
   },
   });