react native怎麼設定頁面背景色

react native設定頁面背景色的方法：1、透過「yarn add react-native-linear-gradient」安裝「react-native-linear-gradient」元件；2、透過在頁面設定「

本教學操作環境：Windows10系統、React Native0.67版、Dell G3電腦。

react native怎麼設定頁面背景色？

React-Native使用漸層背景色

#在CSS 中使用漸層只需要用linear-gradient 就可以，但在React-Native專案中卻不可以直接透過屬性去實現，需要安裝一個react-native-linear-gradient 才可實現。

首先安裝元件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 (
     <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 }}
• 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 will will 10% will take 10% - 75% and finally third color will occupy 75% - 100%.
  可選數組，內容是一些列數字，定義了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 是漸層顏色1與顏色2之間的漸變區域，0.7到1是顏色2和顏色3之間漸變的區域。那麼還有個0-0.1區域呢？該區域是顏色1。
locations={[ 0, 0.5, 0.8]}，則0-0.5是顏色1和顏色2漸變區域，0.5-0.8是顏色2和顏色3的漸變區域，而0.8-1區域的顏色是顏色3。

• 設定旋轉角度

#

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

 
推薦學習：《react影片教學》

以上是react native怎麼設定頁面背景色的詳細內容。更多資訊請關注PHP中文網其他相關文章！