How to set the page background color in react native

How to set the page background color in react native: 1. Install the "react-native-linear-gradient" component through "yarn add react-native-linear-gradient"; 2. By setting "

The operating environment of this tutorial: Windows 10 system, React Native version 0.67, Dell G3 computer.

How to set the page background color in react native?

React-Native uses gradient background color

To use gradients in CSS, you only need to use linear-gradient, but in React-Native However, it cannot be implemented directly through attributes in the project. You need to install a react-native-linear-gradient to achieve it.

First install the componentreact-native-linear-gradient

yarn add react-native-linear-gradient

Use in the page

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 (
     <LinearGradient colors={[&#39;#FFD801&#39;, &#39;#FF8040&#39;, &#39;#F75D59&#39;]} style= {styles.linearGradient}>
      <Text style={{color:&#39;#ffffff&#39;}}>
    Sign in with Facebook
      </Text>
</LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  content: {
           justifyContent:&#39;center&#39;,
          alignItems:&#39;center&#39;,
          width:200,
          height:50,
          paddingLeft: 15,
          paddingRight: 15,
          borderRadius: 5
  },
});

Effect:

LinearGradient’s properties:

colors
start/end
locations

• colors
  An array of at least two color values ​​that represent gradient colors. Example: ['red', 'blue'] sets gradient from red to blue.
  At least 2 color values ​​for color gradient.
• start
  An optional object of the following type: { x: number, y: number }. Coordinates declare the position that the gradient starts at, as a fraction of the overall size of the gradient, starting from the top left corner. Example: { x: 0.1, y: 0.1 } means that the gradient will start 10% from the top and 10% from the left.
  Optional object, in the form: { x: number , y: number }. The coordinates declare the starting position of the gradient.
• end
  Same as start, but for the end of the gradient.
  Same as start, but for the end of the gradient.
  start and end exist at the same time. The line connecting the starting point and end point of the gradient is the direction of the gradient trajectory.
  start={{ x : 0.0, y : 0.25 }}end={{ x : 0.5, y : 1.0 }}
• locations
  An optional array of numbers defining the location of each gradient color stop, mapping to the color with the same index in colors prop. Example: [0.1, 0.75, 1] ​​means that first color will take 0% - 10%, second color will take 10% - 75% and finally third color will occupy 75% - 100%.
  Optional array, the content is a series of numbers that defines the stopping position of each corresponding gradient color in colors.

<LinearGradient    start={{ x : 0.0, y : 0 }} end={{ x : 1, y : 0 }}    locations={[ 0.1, 0.7, 1 ]}    colors={[ &#39;yellow&#39;, &#39;green&#39;, &#39;#ff0000&#39; ]}    style={styles.linearGradient}>    <Text style={styles.buttonText}>
        Sign in with Facebook    </Text></LinearGradient>

##0.1-0.7 is the gradient area between color 1 and color 2, 0.7 to 1 is the area of ​​gradient between color 2 and color 3. So what about the 0-0.1 area? This area is color 1.

locations={[ 0, 0.5, 0.8]}, then 0-0.5 is the gradient area of ​​color 1 and color 2, 0.5-0.8 is the gradient area of ​​color 2 and color 3, and the color of the 0.8-1 area is color 3.

• Set the rotation angle

##

<LinearGradient
    colors={[&#39;red&#39;, &#39;#375BB1&#39;]}
    useAngle={true}// 开启旋转
    angle={90}// 旋转角度，0的时候为从下到上渐变，按照角度顺时针旋转
    angleCenter={{ x: 0.5, y: 0.5}}// 旋转中心
    style={{ height: 50, marginTop: 50 }}>    <View style={{ justifyContent: &#39;center&#39;, alignItems: &#39;center&#39;, height: 50 }}>
        <Text style={{ color: &#39;#ffffff&#39;, fontSize: 28 }}>Test Screen</Text>
    </View></LinearGradient>

Recommended learning: "

react video tutorial
》

The above is the detailed content of How to set the page background color in react native. For more information, please follow other related articles on the PHP Chinese website!