返回顶部
首页 > 资讯 > 前端开发 > 其他 >react native怎么设置页面背景色
  • 570
分享到

react native怎么设置页面背景色

react-native 2023-05-14 21:05:37 570人浏览 独家记忆
摘要

本教程操作环境:windows10系统、React Native0.67版、Dell G3电脑。react native怎么设置页面背景色?React-Native使用渐变背景色在 CSS 中使用渐变只需要用 linear-gradient

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

const styles = StyleSheet.create({
  content: {
           justifyContent:'center',
          alignItems:'center',
          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={[ 'yellow', 'green', '#ff0000' ]}    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={['red', '#375BB1']}
    useAngle={true}// 开启旋转
    angle={90}// 旋转角度,0的时候为从下到上渐变,按照角度顺时针旋转
    angleCenter={{ x: 0.5, y: 0.5}}// 旋转中心
    style={{ height: 50, marginTop: 50 }}>    <View style={{ justifyContent: 'center', alignItems: 'center', height: 50 }}>
        <Text style={{ color: '#ffffff', fontSize: 28 }}>Test Screen</Text>
    </View></LinearGradient>

推荐学习:《react视频教程》

以上就是react native怎么设置页面背景色的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react native怎么设置页面背景色

本文链接: https://lsjlt.com/news/206489.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • react native怎么设置页面背景色
    本教程操作环境:Windows10系统、React Native0.67版、Dell G3电脑。react native怎么设置页面背景色?React-Native使用渐变背景色在 CSS 中使用渐变只需要用 linear-gradient...
    99+
    2023-05-14
    react-native
  • react native如何设置页面背景色
    这篇文章主要讲解了“react native如何设置页面背景色”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“react native如何设置页面背景色”吧!react native设置页面背...
    99+
    2023-07-04
  • CSS怎么设置页面背景色
    这篇文章将为大家详细讲解有关CSS怎么设置页面背景色,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。css是什么意思css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网...
    99+
    2023-06-14
  • Vue-cli怎么为单独页面设置背景色
    这篇文章主要介绍了Vue-cli怎么为单独页面设置背景色的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue-cli怎么为单独页面设置背景色文章都会有所收获,下面我们一起来看看吧。<template>...
    99+
    2023-07-04
  • react-native实现渐变色背景过程
    目录react-native 渐变色背景react-native学习记录滚动条轮播图示例渐变色ScrollableTabView默认页面ScrollableTabView背景颜色Sc...
    99+
    2024-04-02
  • html网页背景颜色怎么设置
    使用 css 样式表的 background-color 属性即可设置 html 网页的背景颜色,步骤包括创建 css 样式表,设置背景颜色属性,应用到 html 元素,指定颜色值,使用...
    99+
    2024-04-05
    css
  • uniapp中如何设置全局页面背景色
    这篇“uniapp中如何设置全局页面背景色”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“uniapp中如何设置全局页面背景色...
    99+
    2023-07-05
  • html怎么设置背景色
    这篇文章将为大家详细讲解有关html怎么设置背景色,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。html设置背景色的方法:使用属性【style】背景颜色,如设置一个h3标签的背景颜色为红色,代码为【<...
    99+
    2023-06-06
  • html网页制作怎么设置背景颜色
    html中设置网页背景颜色的方法有:内联样式:在html元素的style属性中设置背景颜色。外部样式表:在css文件中定义样式规则。css变量:使用css变量来设置背景颜色。图像作为背景...
    99+
    2024-04-05
    css
  • html怎么设置网页背景颜色渐变
    要设置网页背景颜色渐变,可以使用 css 中的 background-image 属性。首先定义渐变颜色(如 blue, green),设置渐变方向(如 to right),设置渐变位置...
    99+
    2024-04-05
    css
  • html页面背景怎么设置图片
    为 html 页面设置背景图片需执行以下步骤:创建背景图片并创建 css 文件。在 css 文件中添加代码,指定背景图片路径、重复方式和尺寸。将 css 链接到 html 文件。 如何...
    99+
    2024-05-16
    css
  • DIV背景颜色怎么设置
    这篇“DIV背景颜色怎么设置”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“DIV背景颜色怎...
    99+
    2024-04-02
  • html怎么设置背景颜色
    这篇文章将为大家详细讲解有关html怎么设置背景颜色,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 一:设置背景颜色 1.准备编辑HTML 首先确定要使用的背景颜色...
    99+
    2024-04-02
  • php怎么设置背景颜色
    要在 php 中设置网页背景颜色,可以使用 bgcolor 属性,步骤包括:在 html 页面中添加 标签。在 标签中设置 bgcolor 属性:。将 "color" 替换为所需的 ...
    99+
    2024-05-14
  • css怎么设置背景图片和背景颜色
    这篇文章主要讲解了“css怎么设置背景图片和背景颜色”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css怎么设置背景图片和背景颜色”吧!一、设置背景颜色:b...
    99+
    2024-04-02
  • Vue-cli中如何为单独页面设置背景色
    这篇文章主要介绍Vue-cli中如何为单独页面设置背景色,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!例子:<template>  <div c...
    99+
    2024-04-02
  • 怎么用css设置背景颜色
    本篇内容主要讲解“怎么用css设置背景颜色”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用css设置背景颜色”吧!我们先来看一个小例子吧,了解一下什么是背景...
    99+
    2024-04-02
  • html怎么设置div背景颜色
    html设置div背景颜色的方法:1.创建html文件;2.添加html架构代码到html文件中;3.在html架构中的body标签里面使用div标签设置一个div盒子;4.在html架构中的html标签里面添加script标签并设置背景颜...
    99+
    2024-04-02
  • php怎么设置phpexcel背景颜色
    这篇文章主要介绍了php怎么设置phpexcel背景颜色,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。设置方法:首先使用“getActiveSheet()->getSt...
    99+
    2023-06-14
  • Python中怎么设置背景颜色
    在Python中,可以使用turtle库来设置绘图窗口的背景颜色。以下是一个示例代码:```pythonimport turtle#...
    99+
    2023-09-21
    Python
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作