React Nativeでページの背景色を設定する方法

反応ネイティブでページの背景色を設定する方法: 1. 「yarn add reverse-native-linear-gradient」を通じて「react-native-linear-gradient」コンポーネントをインストールします; 2. 「<」を設定することで、 ; LinearGradient Colors={['#FFD801', '#FF8040', '#F75D59']} style= {...}" で背景色を実現します。

このチュートリアルの動作環境: Windows 10 システム、React Native バージョン 0.67、Dell G3 コンピューター。

反応ネイティブでページの背景色を設定するにはどうすればよいですか?

React-Native はグラデーションの背景色を使用します

CSS でグラデーションを使用するには、linear-gradient を使用するだけで済みますが、React ではネイティブ ただし、プロジェクトの属性を介して直接実装することはできないため、これを実現するには、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
  少なくとも 2 つの色の値の配列例: ['red', 'blue'] 赤から青へのグラデーションを設定します。
  色のグラデーションには少なくとも 2 つの色の値が必要です。
• start
  次のタイプのオプションのオブジェクト: { x: 数値, y: 数値 }。座標は、グラデーションが開始する位置を、グラデーション全体のサイズの一部として宣言します。例: { x: 0.1, y: 0.1 } は、グラデーションが上から 10%、左から 10% から始まることを意味します。
  オプションのオブジェクト (形式: { x:number ,) y: 数値 }。座標はグラデーションの開始位置を宣言します。
• end
  start と同じですが、グラデーションの終点です。
  start と同じですが、グラデーションの終点です。
  start と end は同時に存在し、勾配の始点と終点を結んだ線が勾配軌跡の方向になります。
  start={{ x : 0.0, y : 0.25 }}end={{ x : 0.5, y : 1.0 }}
• 場所
  各グラデーション カラー ストップの位置を定義する数値のオプションの配列。colors prop の同じインデックスを持つ色にマッピングします。例: [0.1, 0.75, 1] は、最初の色が 0% ～ 10% になることを意味します。 2 番目の色は 10% ～ 75% を占め、最後に 3 番目の色は 75% ～ 100% を占めます。
  オプションの配列。内容は、色の対応する各グラデーション カラーの停止位置を定義する一連の数値です。

<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 中国語 Web サイトの他の関連記事を参照してください。