Papan kekunci React Native menolak segala-galanya dan saya tidak mempunyai kawalan

Question

Apabila papan kekunci dibuka, saya hanya mahu input komen bergerak ke atas, tetapi semuanya bergerak ke atas

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',
  },
});

Saya mencuba "softwareKeyboardLayoutMode":"pan", penyelesaian Saya telah mencuba KeyboardAvoidingView dan KeyboardVerticalOffset di mana-mana tetapi tidak dapat mencari penyelesaian Saya mencuba paparan tatal elakkan paparan dengan atau tanpa papan kekunci

Answer 1

Anda boleh cuba menambah tiga perkara ini dalam kod anda.

1. Tambah Papan KekunciAvoidingView di sekeliling komponen InputComp.

2. Tetapkan sifat gelagat KeyboardAvoidingView kepada "padding".

3. Tetapkan sifat gaya KeyboardAvoidingView kepada {height: Ketinggian responsif(10), warna latar belakang: 'putih'}.

   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',
   },
   });