当键盘打开时,我只希望评论输入向上移动,但所有内容都会向上移动
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 但找不到解决方案 我尝试了带或不带键盘的滚动视图避免视图
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
您可以尝试在代码中添加这三件事。
在 InputComp 组件周围添加一个 KeyboardAvoidingView。
将 KeyboardAvoidingView 的行为属性设置为“padding”。
将 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',
},
});