React Native 键盘将一切推高，我无法控制

Question

当键盘打开时，我只希望评论输入向上移动，但所有内容都会向上移动

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

我尝试了“softwareKeyboardLayoutMode”：“pan”，解决方案 我到处尝试了 KeyboardAvoidingView 和 KeyboardVerticalOffset 但找不到解决方案 我尝试了带或不带键盘的滚动视图避免视图

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