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

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

查看更多关于react-native 实现渐变色背景过程的详细内容...