react-native 实现渐变色背景过程

目录
  • react-native 渐变色背景
  • react-native学习记录
    • 滚动条
    • 轮播图示例
    • 渐变色
    • ScrollableTabView默认页面
    • ScrollableTabView背景颜色
    • ScrollableTabView选中颜色
    • ScrollableTabView未选中颜色

react-native 渐变色背景

使用react-native-linear-gradient插件

1.安装

npm react-native-linear-gradient

2.链接

react-native link react-native-linear-gradient

3.代码使用

 <LinearGradient colors={["#57AFFF","#2A63BF","#042289"]} style={{flex:1}}>
 </LinearGradient>

4.效果图

5.如果出现以下错误

解决办法:

1.彻底退出项目重新react-native run-ios就可以了。

2.如果1没解决,就尝试2

react-native学习记录

滚动条

横向滚动:

//在ScrollView里面加上这段代码即可
 horizontal={true}

隐藏滚动条:

//隐藏水平
showsHorizontalScrollIndicator = {false}
//隐藏垂直
showsVerticalScrollIndicator = {false}

轮播图示例

先导入:

$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Image,
} from 'react-native';
import Dimensions from 'Dimensions';
import Swiper from 'react-native-swiper';
var screenWidth = Dimensions.get('window').width;
export default class SwiperScreen extends Component {
    render() {
        return (
            <View style={styles.lunbotu}>
                <Swiper
                    style={styles.wrapper}
                    height={240}
                    autoplay={true}
                    loop={true}
                    keyExtractor={(item, index) => index + ''}
                    index={1}
                    autoplayTimeout={3}
                    horizontal={true}
                    onMomentumScrollEnd={(e, state, context) => {
                    }}
                    dot={<View style={styles.dotStyle}/>}
                    activeDot={<View style={styles.activeDotStyle}/>}
                    paginationStyle={{
                        bottom: 10
                    }}>
                    <View>
                        <Image style={{width: screenWidth, height: 150}}
                               resizeMode="stretch"
                               source={{uri: ''}}>
                        </Image>
                    </View>
                    <View>
                        <Image style={{width: screenWidth, height: 150}}
                               resizeMode="stretch"
                               source={{uri: ''}}>
                        </Image>
                    </View>
                    <View>
                        <Image style={{width: screenWidth, height: 150}}
                               resizeMode="stretch"
                               source={{uri: ''}}>
                        </Image>
                    </View>
                </Swiper>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    dotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        opacity: 0.4,
        borderRadius: 0,
    },
    activeDotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        borderRadius: 0,
    },
    lunbotu: {
        height: 120,
        backgroundColor: '#222222'
    },
});

渐变色

先安装:

 yarn add react-native-linear-gradient
 react-native link react-native-linear-gradient
import React, {Component} from 'react';
import {
    Image,
    View,
    Text,
    StyleSheet
} from 'react-native';
import LinearGradient from "react-native-linear-gradient";
export default class LinearGradientScreen extends Component {
    render() {
        return (
            <View style={{height: '100%'}}>
                <LinearGradient colors={['red', 'green', 'blue']} style={styles.container}>
                </LinearGradient>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        height: '100%'
    }
})

ScrollableTabView默认页面

标签内加上initialPage并赋值下标即可

render() {
    return (
        <ScrollableTabView
            initialPage={1}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

ScrollableTabView背景颜色

标签内加上tabBarBackgroundColor并赋值即可

render() {
    return (
        <ScrollableTabView
            tabBarBackgroundColor='#FFFFFF'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

ScrollableTabView选中颜色

标签内加上tabBarActiveTextColor并赋值即可

render() {
    return (
        <ScrollableTabView
            tabBarActiveTextColor='#FFFFFF'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

ScrollableTabView未选中颜色

标签内加上tabBarInactiveTextColor并赋值即可

render() {
    return (
        <ScrollableTabView
            tabBarInactiveTextColor ='#FFFFFF'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 使用react-native-doc-viewer实现文档预览

    目录 react-native-doc-viewer文档预览 具体步骤如下 react-native初体验的总结 一.前提知识点 二.开发前后相关的一些配置 三.开发项目中用到的知识 四.ui库 五.项目搭建 六.根据需要安装对应依赖 七.开发和调试 react-native-doc-viewer文档预览 react-native项目要求实现word,excel,pdf,mp4,png等格式附件图片的在线预览,最终选用react-native-doc-viewer实现, 具体步骤如下 1.安装r

  • 详解React Native项目中启用Hermes引擎

    目录 引言 一.启用 Hermes 引擎 1.1 Android 1.2 iOS 二.Hermes 引擎使用 2.1 检查 Hermes 引擎是否启用 2.2 绑定Hermes 2.3 使用DevTools在Hermes上调试JS 引言 目前,最新版本的React Native(0.70.0及以上版本)已经默认开启了Hermes引擎.而Hermes则是专门针对React Native应用而优化的全新JavaScript引擎,启用Hermes引擎可以优化启动时间,减少内存占用以及空间占用. 一.启

  • react-native 父函数组件调用类子组件的方法(实例详解)

    react-native 父函数组件调用类子组件的方法,代码如下所示: import React, {Component} from 'react'; import {Text, View, TouchableOpacity} from 'react-native'; // 父 let child onRefbbb = (ref) => { child = ref } clickccc = () => { child.myName() } const Parent =()=> { ret

  • 使用react-native-image-viewer实现大图预览

    目录 react-native-image-viewer大图预览 先看一个实现的效果 实例 下面是一个简单的实例代码 Props react-native-image-viewer大图预览 在移动开发中,特别是涉及到图片的应用开发中,经常会遇到图片预览等功能,并且预览支持图片的放大和缩小,在Android原生开发中可以使用PhotoViewPager库实现,如果在React Native中,可以选择使用react-native-image-viewer. 先看一个实现的效果 实例 使用前需要先安

  • React Native 的动态列表方案探索详解

    目录 背景 技术方案介绍 内存 异常处理 未来规划 背景 时至2022,精细化运营已经成为了各大App厂商的强需求,阿里的 DinamicX.Tangram 大家应该都很熟悉了,很多App厂商也自研了一些类似框架,基于DSL的动态化方案虽然有性能上的一些优势,但是毕竟不是图灵完备,一些需要逻辑动态下发的需求实现成本偏高,或由于DSL本身限制无法实现,针对这个问题我们使用RN进行了一下探索尝试, 利用我们已经相对完善的RN基建,结合客户端列表能力低成本的实现了一套的动态化能力,同时兼顾一定的性能体

  • react-native 实现渐变色背景过程

    目录 react-native 渐变色背景 react-native学习记录 滚动条 轮播图示例 渐变色 ScrollableTabView默认页面 ScrollableTabView背景颜色 ScrollableTabView选中颜色 ScrollableTabView未选中颜色 react-native 渐变色背景 使用react-native-linear-gradient插件 1.安装 npm react-native-linear-gradient 2.链接 react-native

  • 搭建React Native热更新平台的详细过程

    目录 一,什么是热更新 二,热更新方案 三,热更新原理 四,CDN 热更新方案 五,纯 CDN 方案的弊端 六,线上方案 七.整体方案梳理 八,总结 一,什么是热更新 所谓热更新,也叫做动态更新,一种类似 Web 的更新方式.相对于 App 的发版更新而言,热更新能及时的修复线上存在的问题,大幅的提升业务迭代效率.我们都知道,互联网业务讲究兵贵神速,如果业务能够通过热更新来快速发版和迭代,这就相当于在产品和用户之间搭建了一座能够随时通行的桥梁,代替了原来好几周才能有一次迭代的问题. 那么,热更新

  • 在 React Native 中给第三方库打补丁的过程解析

    目录 安装 使用 示例 有时使用了某个React Native 第三方库,可是它有些问题,我们不得不修改它的源码.本文介绍如何修改源码又不会意外丢失修改结果的方法. 我们可能不方便给原作者提 Pull Request,因为他们可能不愿意接受我们的更改.又或者原作者无法及时发布新版本. 种种原因,我们只有去修改 node_modules 目录下的文件. 可是当我们执行 yarn install 或 yarn add 时,原先的修改会丢失. 有没有办法让我们可以在 yarn install 或 ya

  • React Native react-navigation 导航使用详解

    一.开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目.在短短不到3个月的时间,github上星数已达4000+.Fb推荐使用库,并且在React Native当前最新版本0.44中将Navigator删除.react-navigation据称有原生般的性能体验效果.可能会成为未来React Native导航组件的主流军.本篇内容基于[ ^1.0.0-beta.9 ]版本来介绍关于该库的使用和实战技巧.可以看到,虽然是beta版本,不过基本稳定,大家可放心在项目中使用.

  • 自己动手封装一个React Native多级联动

    背景 肯定是最近有一个项目,需要一个二级联动功能了! 本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封装就来说说过程吧 任务开始 一. 原型图或设计图 在封装一个组件之前,首先你要知道组件长什么样子,大概的轮廓要了解 二. 构思结构 在封装之前,先在脑海里面想一下 1. 这个组件需要达到的功能是什么? 改变一级后,二级会跟着变化,改变二级,三级会变,以此类推,可以指定需要选中的项,可以动态改变每一级

  • React Native中实现动态导入的示例代码

    目录 背景 多业务包 动态导入 Metro 打包原理 打包过程 bundle 分析 __d函数 __r函数 方案设计 分 识别入口 树拆分 bundle 生成 合 总结 背景 随着业务的发展,每一个 React Native 应用的代码数量都在不断增加,bundle 体积不断膨胀,对应用性能的负面影响愈发明显.虽然我们可以通过 React Native 官方工具 Metro 进行拆包处理,拆分为一个基础包和一个业务包进行一定程度上的优化,但对日益增长的业务代码也无能为力,我们迫切地需要一套方案来

  • Shopee在React Native 架构方面的探索及发展历程

    目录 1. 背景 2. 发展历程 2.1 第一阶段:单 bundle 集中开发模式 2.2 第二阶段:单 bundle 多业务组开发模式 2.3 第三阶段:多 bundle 中心化架构模式 3. 去中心的 RN 架构模型 3.1 独立 JS 运行时 3.2 开发流程 3.3 构建流程 3.4 发布流程 4. 系统设计 4.2 bundle 生命周期管理 4.2.1 客户端版本控制 4.2.2 灰度和回滚 4.3 系统效能提升 4.3.1 差分增量 4.3.2 多场景入口体积优化 4.3.3 一站

  • React Native Modal 的封装与使用实例详解

    目录 背景 Android FullScreenModal 的封装使用 Android 原生实现全屏 Dialog 封装给 RN 进行相关的调用 Android 原生部分实现 JS 部分实现 使用 RootSiblings 封装 Modal 实现界面 Render 相关 实现 Modal 展示动画相关 使用 View 封装 Modal 整体 Modal 控件的封装 其他 Android Back 键的注意 View 封装 Modal 时候的注意 最后 背景 在使用 React Native(以下

  • React Native学习教程之自定义NavigationBar详解

    前言 在刚开始学习React Native的时候,版本还是0.20,问题一大堆,Navigation这个问题更是很多,首先,是NavigationBar的问题,NavigationIOS有NavigationBar,Navigation却需要自定义一个,最后,我想了想,还是自定义一个view,岂不更好,现在新公司不用RN,我正好有点时间,就把自定义的NavigationBar分享给大家.好了少废话,上代码: 示例代码 // NavigationBar 导航条的自定义封装 // create by

  • React Native 通告消息竖向轮播组件的封装

    本文实例为大家分享了React Native通告消息竖向轮播组件的封装代码,供大家参考,具体内容如下 import React, {Component} from 'react' import { Text, View, Animated, Easing, StyleSheet, } from 'react-native' export default class ScrollVertical extends Component { static defaultProps = { enableA

随机推荐