非Expo环境下React Native安卓应用实现线性渐变文本的方法

直接给Text组件的color属性设置线性渐变是不可行的，RN原生Text组件不支持这种用法。不过有两种可靠的实现方案，也是热门RN应用常用的方式：

方法一：使用专门的原生文本渐变库 #

推荐用react-native-linear-gradient-text，这是针对文本渐变的原生实现，兼容性和性能都不错：

1. 安装依赖

   npm install react-native-linear-gradient-text --save
   # 或用yarn
   yarn add react-native-linear-gradient-text
   

2. 原生模块链接（React Native 0.60+版本自动完成，低版本需手动执行react-native link react-native-linear-gradient-text）
3. 代码示例

   import LinearGradientText from 'react-native-linear-gradient-text';
   
   <LinearGradientText
     text="渐变效果文本"
     style={{ fontSize: 28, fontWeight: '600' }}
     colors={['#FE5196', '#F77062', '#FE9A8B']}
     start={{ x: 0, y: 0 }}
     end={{ x: 1, y: 0 }}
   />
   

   • colors：传入渐变颜色数组，支持多色过渡
   • start/end：通过坐标控制渐变方向，比如{x:0,y:0}到{x:1,y:0}是水平渐变

方法二：遮罩视图+线性渐变组合实现 #

如果不想引入专门的文本渐变库，可通过react-native-masked-view结合react-native-linear-gradient模拟：

1. 安装依赖

   npm install react-native-masked-view react-native-linear-gradient --save
   # 或用yarn
   yarn add react-native-masked-view react-native-linear-gradient
   

2. 原生模块链接（0.60+自动完成，低版本手动链接）
3. 代码示例

   import MaskedView from 'react-native-masked-view';
   import LinearGradient from 'react-native-linear-gradient';
   import { Text } from 'react-native';
   
   <MaskedView
     maskElement={
       <Text style={{ fontSize: 28, fontWeight: '600' }}>渐变效果文本</Text>
     }
   >
     <LinearGradient
       colors={['#1A2980', '#26D0CE']}
       style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
       start={{ x: 0, y: 0 }}
       end={{ x: 1, y: 0 }}
     />
   </MaskedView>
   

   原理是用文本作为遮罩层，让线性渐变仅显示文本区域的内容，从而实现渐变文本效果。

热门RN应用的实现方式 #

多数热门RN应用（如电商、社交类）要么采用上述原生文本渐变库方案，要么使用遮罩+渐变的组合方案。这两种方式都属于RN原生生态内的实现，无需依赖Expo，能满足生产环境的性能和兼容性要求。

内容的提问来源于stack exchange，提问作者user20659824