Die React Native-Tastatur treibt alles nach oben und ich habe keine Kontrolle

Question

Bei geöffneter Tastatur möchte ich nur, dass die Kommentareingabe nach oben wandert, aber alles wandert nach oben

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

Ich habe die Lösung „softwareKeyboardLayoutMode“: „pan“ ausprobiert Ich habe KeyboardAvoidingView und KeyboardVerticalOffset überall ausprobiert, kann aber keine Lösung finden Ich habe versucht, die Scroll-Ansicht zu vermeiden und die Ansicht mit oder ohne Tastatur zu vermeiden

Answer 1

您可以尝试在代码中添加这三件事。

1. 在 InputComp 组件周围添加一个 KeyboardAvoidingView。

2. 将 KeyboardAvoidingView 的行为属性设置为“padding”。

3. 将 KeyboardAvoidingView 的样式属性设置为 {height: 响应式高度（10），背景颜色：'白色'}。

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