react native expo 如何让文字产生线性渐变

react native expo 如何让文字产生线性渐变

首先下载 线性渐变的按钮插件

npx expo install expo-linear-gradient

然后再要使用的页面进行引用就可以了,

import { LinearGradient } from 'expo-linear-gradient';

官方的链接在这里相关属性可以自己去查询
下面是一个简单的例子

import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        // Background Linear Gradient
        colors={['rgba(0,0,0,0.8)', 'transparent']}
        style={styles.background}
      />
      <LinearGradient
        // Button Linear Gradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={styles.button}>
        <Text style={styles.text}>Sign in with Facebook</Text>
      </LinearGradient>
    </View>
  );
}

const styles = StyleSheet.create({ ... }); 

以上我们就实现了一个线性渐变的方块,但怎样实现一个线性渐变的文字呢?这里我们就需要另外一个插件 MaskedView这是它官方描述的链接
可以通过以下方法来进行插件的下载

npx expo install @react-native-masked-view/masked-view

通过如下声明你就可以去想要的声明重使用了

import MaskedView from '@react-native-community/masked-view';

下面是一个简单的线性渐变文字例子

<MaskedView
                      style={{ height:50,marginTop:120,left:30}}
                      maskElement={
                        <View>
                           <Text style={{ fontSize: 30,fontWeight:'700' }}>0123456789</Text>
                        </View>
                    
                         }
                      >
                        <LinearGradient
                          colors={['#ABABAB', '#F4F4F4','#909090', '#F4F4F4']}
                          start={{ x: 0, y: 0 }}
                          end={{ x: 0, y: 0.7 }}
                          style={{ flex: 1 }}
                        />
                      </MaskedView>

相关的属性我就补一一介绍了,大家可以自行搜索,对了,这样使用后如果你线性渐变的文字想要修改其字体样式会出现找不到字体样式的问题,我暂时找不到解决办法,如果又小伙伴又解决方法欢迎留言告诉我,感谢