已开启
[Bug]: 安卓和鸿蒙渐变效果完全相反 #11
carry5250创建于 2025年8月22日
dingchengjie
7月20日 评论：
7月20日 评论：
你好开发者，渐变的方向取决于鸿蒙底层绘制的坐标，当前鸿蒙底层就是这样处理的，所以鸿蒙上这种效果回合其他平台不一致。导致此差异的问题在于系统底层的坐标处理方式不同，当前评估不修改
GO543
8月5日 评论：
8月5日 评论：
你好开发者，渐变的方向取决于鸿蒙底层绘制的坐标，当前鸿蒙底层就是这样处理的，所以鸿蒙上这种效果回合其他平台不一致。导致此差异的问题在于系统底层的坐标处理方式不同，当前评估不修改
目前为了保证三端一致，我们业务使用时单独对鸿蒙的这个组件做了差异化处理，但以用户视角上看，这是不合理的。rn本身就是为了一码多端，为什么不在组件层进行适配以保证三端一致呢？或者说现在就是在建议用户自己对鸿蒙端做特殊处理吗？长期从推广鸿蒙上看也不合理吧？
shaojunye
8月21日 评论：
8月21日 评论：
你好开发者，当前问题已解决，待发布正式版本
感谢对OpenHarmony社区的支持与关注，欢迎反馈缺陷。
发生了什么问题？
同样的代码，在鸿蒙端和安卓端的效果不一致
期望行为是什么？
鸿蒙和安卓效果一致
如何复现该缺陷
demo如下：
import React, { useRef, useState } from 'react';
import LinearGradient from 'react-native-linear-gradient';
import { View, StyleSheet, PanResponder, Dimensions } from 'react-native';
const sliderHeight = 40; // 假设滑块高度为40
const screenWidth = Dimensions.get('window').width;
const LinearGradientExample = () => {
const [position_x, setPositionX] = useState(0);
const pan_responder = useRef(
PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (evt, gestureState) => {
let x = gestureState.dx;
// 限制滑块移动范围
x = Math.max(0, Math.min(x, screenWidth - sliderHeight));
setPositionX(x);
},
}),
).current;
return (
<LinearGradient
style={styles.slider}
colors={['#edf6fd', '#fefbd8', '#feb127', '#f57f01']}
start={{ x: 0, y: 1 }}
end={{ x: 1, y: 0 }}>
<View
style={[styles.mask, { marginLeft: -(sliderHeight / 2), left: position_x }]}
{...pan_responder.panHandlers}>
);
};
const styles = StyleSheet.create({
container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
slider: { width: '50%', height: '50%' },
mask: {
position: 'absolute',
top: 0,
width: 40,
height: 40,
justifyContent: 'center',
alignItems: 'center',
},
maskBox: {
width: 30,
height: 30,
backgroundColor: '#fff',
borderRadius: 15,
borderWidth: 2,
borderColor: '#feb127',
},
});
export default LinearGradientExample;
效果差异如下
鸿蒙效果：
安卓效果：
其他补充信息
版本或分支信息
[x] master
[ ] 5.0-Beta1
[ ] Release 4.1
[ ] Release 4.0
[ ] Release 3.2