So legen Sie die Hintergrundfarbe der Seite in React Native fest

Um Farbverläufe in CSS zu verwenden, müssen Sie nur linear-gradient verwenden. In React-Native-Projekten kann dies jedoch nicht direkt über Attribute implementiert werden Eine Reaktion. Dies kann nur mit nativem-linear-gradient erreicht werden.

Installieren Sie zunächst die Komponente react-native-linear-gradientreact-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 (
     <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
  },
});

效果：

LinearGradient的属性：

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.
  至少2个颜色值，用于颜色渐变。
• 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.
  可选的对象，形式如: { x: number, y: number }。坐标宣告了渐变的开始位置。
• end
  Same as start, but for the end of the gradient.
  和start一样，但是渐变的结束位置。
  start和end同时存在，渐变的起点和终点的连线，即使渐变的轨迹方向。
  start={{ x : 0.0, y : 0.25 }}end={{ x : 0.5, y : 1.0 }}

  <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>

  Nach dem Login kopieren
Verwenden Sie
• 
  

  <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>

  Nach dem Login kopieren
  
  auf der Seite Wirkung:
  

  LinearGradient-Eigenschaften:

  rrreee

  Farben

  Ein Array aus mindestens zwei Farbwerten, die Farbverläufe darstellen. Beispiel: ['rot', 'blau'] legt den Farbverlauf von Rot nach Blau fest.

  Mindestens 2 Farbwerte für Farbverläufe.
  

  start

  Ein optionales Objekt des folgenden Typs: { x: Zahl, y: Zahl } Koordinaten geben die Position an, an der der Farbverlauf beginnt, als Bruchteil der Gesamtgröße des Farbverlaufs, beginnend in der oberen linken Ecke. Beispiel: { x: 0,1, y: 0,1 } bedeutet, dass der Farbverlauf 10 % von oben und 10 % von links beginnt.

  Optionales Objekt in der Form: { x: Zahl, y: Zahl }. Die Koordinaten geben die Startposition des Gradienten an.

  • Ende

    Wie Start, aber für das Ende des Farbverlaufs.
  Wie Start, aber für das Ende des Farbverlaufs.

  Start und Ende existieren gleichzeitig, und die Linie, die den Startpunkt und den Endpunkt des Gradienten verbindet, ist die Richtung der Gradiententrajektorie.

  start={{ x : 0.0, y : 0.25 }}end={{ x : 0.5, y : 1.0 }}

  Standorte
  Ein optionales Array von Zahlen Definieren der Position jedes Farbverlaufsstopps, Zuordnung zu der Farbe mit demselben Index in der Farbstütze. Beispiel: [0,1, 0,75, 1] ​​​​bedeutet, dass die erste Farbe 0 % - 10 % annimmt, die zweite Farbe 10 %. - 75 % und schließlich wird die dritte Farbe 75 % - 100 % einnehmen.Optionales Array, der Inhalt ist eine Reihe von Zahlen, die die Stoppposition jeder entsprechenden Farbverlaufsfarbe in den Farben definiert.
  rrreee🎜🎜🎜🎜🎜🎜🎜🎜🎜0,1-0,7 ist der Verlaufsbereich zwischen Farbe 1 und Farbe 2, 0,7 bis 1 ist der Verlaufsbereich zwischen Farbe 2 und Farbe 3. Was ist also mit dem Bereich 0-0,1? Dieser Bereich hat die Farbe 1. 🎜locations={[ 0, 0,5, 0,8]}, dann ist 0-0,5 der Verlaufsbereich von Farbe 1 und Farbe 2, 0,5-0,8 ist der Verlaufsbereich von Farbe 2 und Farbe 3 und die Farbe von Der Bereich 0,8-1 hat die Farbe 3. 🎜🎜🎜🎜🎜Stellen Sie den Drehwinkel ein🎜🎜🎜🎜🎜🎜rrreee 🎜Empfohlenes Lernen: „🎜Video-Tutorial reagieren🎜“🎜