React-Native使用渐变背景色

首先安装组件 react-native-linear-gradient

yarn add react-native-linear-gradient

在页面中使用

import React from 'react';
import {Text, StyleSheet, View, Dimensions} from 'react-native';
import LinearGradinet from 'react-native-linear-gradient';

export default class Home extends React.Component {
  render() {
    return (
      <View style={styles.content}>
        <Text>首页</Text>
        <LinearGradinet
          start={{x: 0, y: 0}}
          end={{x: 1, y: 0}}
          colors={['#9b63cd', '#e0708c']}
          style={{width: 200, height: 200}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

可以通过 LinearGradinet 的 start 和 end 来控制渐变的方向

colors 控制渐变的颜色

在 ios 目录下执行 pod install 并重启项目，会看到如下效果

image.png