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

更新时间：2022年09月15日 09:45:36 作者：Volon Kou

这篇文章主要介绍了react-native 实现渐变色背景过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React-Native 环境搭建和基本介绍
这篇文章主要介绍了React-Native 环境搭建和基本介绍的相关资料,包括react native优缺点，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2021-04-04
react中关于函数调用()与bind this的原因及分析
这篇文章主要介绍了react中关于函数调用()与bind this的原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
React状态管理的简明指南
Redux 是React最常用的集中状态管理工具,本文主要介绍了React状态管理的简明指南,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
ReactJS 应用兼容ios9对标ie11解决方案
这篇文章主要为大家介绍了ReactJS 应用兼容ios9对标ie11解决方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
详解React-Todos入门例子
本篇文章主要介绍了React-Todos入门例子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
React中进行条件渲染的实现方法
React是一种流行的JavaScript库,它被广泛应用于构建Web应用程序,在React中,条件渲染是一个非常重要的概念,它允许我们根据不同的条件来呈现不同的内容,在本文中,我们将探讨React如何进行条件渲染,需要的朋友可以参考下
2023-11-11
React18之update流程从零实现详解
这篇文章主要为大家介绍了React18之update流程从零实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
React实现一个拖拽排序组件的示例代码
这篇文章主要给大家介绍了React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域,文章通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-11-11
react组件传值的四种方法
本文主要介绍了react组件传值的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
详解React 条件渲染
这篇文章主要介绍了React 条件渲染的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07