前言
使用RN开发的应用大部分是Android和iOS平台产物，如果开发web当然也可以，但是要知道三者间有诸多平台差异，就比如在渐变色的实现上。在web端你肯定知道配置background-image即可，但是在android和iOS则大不相同，在RN的样式中编写backgroundImage:'linear-gradent()'只能在web端生效。这是一个平台差异，而且实现的配置方式有诸多不同，废话不多说，直接看效果和方案：
方案1：expo-linear-gradient
如果你使用expo创建了RN项目，推荐使用expo-linear-gradient依赖库创建渐变效果。它提供了LinearGradient组件，并且该组件继承自View，特有如下属性：
export type LinearGradientProps = ViewProps & {
colors: readonly [ColorValue, ColorValue, ...ColorValue[]];
locations?: readonly [number, number, ...number[]] | null;
start?: LinearGradientPoint | null;
end?: LinearGradientPoint | null;
dither?: boolean;
};
也就是说相较View组件多了如上一个参数，colors就是颜色值组成的数组，locations是对应colors数组中颜色的位置，start和end是{x:number，y:number}形式的对象，用来控制渐变起点和终点位置，x y都是浮点数0~1范围，比如如下：
<LinearGradient
colors={['#fbecd4', '#f9b960']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={styles.topCard}
/>
很简单，start的x y均为0表示从元素的左上角作为起点，如果y值大于0则是向下移动，x大于0则是向右移动，end也是同道理，locations可以不设置，设置的话要和colors的数组元素数量一致，表示控制颜色的位置。
存在的问题
1.设置圆角需要使用overflow:hidden控制，否则会溢出导致圆角不生效。
2.只支持线性渐变(本身人家组件就是线性渐变)，如果需要径向渐变可能需要其他依赖库，装一堆依赖库应该也是挺烦的
方案2:RN自带的渐变方案
RN具体在哪个版本中开始增加了View组件(包括继承自View组件的组件，比如Pressable等)添加了experimental_backgroundImage属性，我也不清楚，它的使用方式极为简单：
<TouchableOpacity
style={styles.box}
>
...
box: {
marginTop: 100,
width: 200,
height: 300,
borderRadius:10,
experimental_backgroundImage: 'linear-gradient(135deg, #ffffc4 0.000%, #ff6164 50.000%, #b00012 100.000%)'
},
除了线性渐变它还支持径向渐变：radial-gradient(#ccc, red, blue)，但是它不支持conic-gradient渐变。experimental_backgroundImage的编写方式和CSS一样，这对于前端er比较友好。 但是要注意:experimental表示实验性，如果你的产物要在生产环境使用推荐方案1！目前我只是简单测试了experimental_backgroundImage，它不需要overflow:hidden辅助圆角显示，bug情况我也不是很清楚。
至于指定页面的主题渐变色配置逻辑很清晰，最麻烦的是配色和配色的名称，切换设置都很简单，代码我就不贴了， 渐变色可以去网上找，安利一个渐变色网站，有很多渐变资源，直接复制。具体的项目细节可以查看[gitee仓库](expo rn: expo创建的react native的音乐播放器应用，专注视频转歌和本地歌曲播放)
