搜索
首页web前端前端问答react native怎么设置页面背景色
react native怎么设置页面背景色Jan 03, 2023 am 10:31 AM
react-native

react native设置页面背景色的方法:1、通过“yarn add react-native-linear-gradient”安装“react-native-linear-gradient”组件;2、通过在页面设置“

react native怎么设置页面背景色

本教程操作环境: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
  },
});

效果:

e3f8e40156f08ea23529fe21abfbe0a.jpg
 

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 take 0% - 10%, second color 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>
 
e9a8db850e3ff895e33fade7a0b39ab.jpg

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。

  • 设置旋转角度

1539b510565ad8115aed662f5ee41cb.jpg

<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中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
react native怎么更改版本react native怎么更改版本Jan 19, 2023 pm 02:31 PM

react native更改版本的方法:1、进入React Native项目目录,命令行输入“react-native --version”;2、查看npm包管理的React Native版本;3、打开项目中的“package.json”文件,修改dependencies字段,把“react-native”版本修改为目标版本即可。

react native更新失效怎么办react native更新失效怎么办Jan 09, 2023 am 10:41 AM

react native更新失效的解决办法:1、直接把IPA包提交App Store审核,然后把IPA包upload到pushy平台;2、归档出的IPA包upload到pushy平台,然后把IPA包提交到iTunes connect;3、通过Xcode编译一个release模式的包到手机,然后用iTunes导出该IPA包,再upload该IPA到pushy平台即可。

react-native 运行不了怎么办react-native 运行不了怎么办Dec 30, 2022 am 09:36 AM

react-native运行不了的解决办法:1、打开终端,cd到项目文件夹,然后输入“npm install jpush-react-native jcore-react-native --save”;2、把项目里面的“node_modules”文件夹删除掉;3、关掉端口8081对应的进程,重新运行项目。

react native路由跳转怎么实现react native路由跳转怎么实现Jan 06, 2023 am 10:26 AM

react native路由跳转的实现方法:1、使用“yarn add react-navigation”命令安装“react-navigation”;2、通过“yarn add react-native-gesture-handler”命令安装“react-native-gesture-handler”组件;3、设置好初始路由,然后以类的组件的形式导出即可。

react native红屏报错怎么办react native红屏报错怎么办Jan 03, 2023 pm 02:37 PM

react native红屏报错的解决办法:1、在“android/app/src/main/”中创建文件夹assets;2、执行命令“react-native bundle --platform android --dev false --entry-file index.android.js...”;3、在项目中执行“react-native run-android”即可。

react native怎么设置页面背景色react native怎么设置页面背景色Jan 03, 2023 am 10:31 AM

react native设置页面背景色的方法:1、通过“yarn add react-native-linear-gradient”安装“react-native-linear-gradient”组件;2、通过在页面设置“<LinearGradient colors={['#FFD801', '#FF8040', '#F75D59']} style= {...}”来实现背景色。

react navigation报错怎么办react navigation报错怎么办Dec 30, 2022 am 10:35 AM

react navigation报错的解决办法:1、配置“Stack.Navigator initialRouteName="Home"”,然后重启“yarn android”;2、删除“android\app\build\outputs\apk\debug”目录下的打包的apk文件,同时删除模拟器或真机上原有的apk包,然后重新执行“yarn android”即可。

react native 怎么捕捉错误react native 怎么捕捉错误Jan 04, 2023 am 10:46 AM

react native捕捉错误的方法:1、打开相应的react文件;2、使用“require('ErrorUtils').setGlobalHandler(function(err) {...})”方法实现捕获错误,并给予用户合理的提示。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具