react-native 實(shí)現(xiàn)漸變色背景過(guò)程

更新時(shí)間：2022年09月15日 09:45:36 作者：Volon Kou

這篇文章主要介紹了react-native 實(shí)現(xiàn)漸變色背景過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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.如果出現(xiàn)以下錯(cuò)誤

解決辦法：

1.徹底退出項(xiàng)目重新react-native run-ios就可以了。

2.如果1沒(méi)解決，就嘗試2

react-native學(xué)習(xí)記錄

滾動(dòng)條

橫向滾動(dòng)：

//在ScrollView里面加上這段代碼即可
?horizontal={true}

隱藏滾動(dòng)條：

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

輪播圖示例

先導(dǎo)入：

$ 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默認(rèn)頁(yè)面

標(biāo)簽內(nèi)加上initialPage并賦值下標(biāo)即可

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背景顏色

標(biāo)簽內(nèi)加上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選中顏色

標(biāo)簽內(nèi)加上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未選中顏色

標(biāo)簽內(nèi)加上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>
? ? );
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: