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>
    );
}

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

react-native 实现渐变色背景过程的更多相关文章

  1. Android关于Button背景或样式失效问题解决方法

    大家好,本篇文章主要讲的是Android关于Button背景或样式失效问题解决方法,感兴趣的同学赶快来看一看吧,对你有帮助的话记得收藏一下

  2. Android Flutter实现"斑马纹"背景的示例代码

    本文将通过实现一个canvas绘制斑马纹类。使用Stack布局,将斑马纹放在下方作为背景板,需要展示的内容在上方。从而实现 “斑马纹”背景,感兴趣的可以了解一下

  3. 解决VSCode调试react-native android项目错误问题

    这篇文章主要介绍了VSCode调试react-native android项目错误解决办法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. iOS快速实现环形渐变进度条

    之前看到很多环形进度条,看上去很酷,然后就试着学习他们的代码,结果发现实现一个环形进度条一点也不简单。我就在想一个简单的进度条有这么复杂吗?自己摸索后,有一个简单的实现方法。现在分享给大家,有需要的朋友们可以参考借鉴。

  5. Android自定义View之渐变色折线图的实现

    折线图的实现方法在github上有很多开源的程序,但是对于初学者来讲,简单一点的教程可能更容易入门,下面这篇文章主要给大家介绍了关于Android自定义View之渐变色折线图的相关资料,需要的朋友可以参考下

  6. Android实现背景颜色滑动渐变效果的全过程

    在Android开发中,经常需要设置控件的背景颜色或者图片的src颜色,下面这篇文章主要给大家介绍了关于Android实现背景颜色滑动渐变效果的相关资料,本文通过示例代码介绍的非常详细,需要的朋友可以参考下

  7. vue实现登录页背景粒子特效

    这篇文章主要为大家详细介绍了vue实现登录页背景粒子特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. React-Native 环境搭建和基本介绍

    这篇文章主要介绍了React-Native 环境搭建和基本介绍的相关资料,包括react native优缺点,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

  9. iOS给border设置渐变色的方法实例

    这篇文章主要给大家介绍了关于iOS给border设置渐变色的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  10. android中使用react-native设置应用启动页过程详解

    这篇文章主要介绍了android中使用react-native设置应用启动页过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部