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

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

目录

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 screpythonenWidth = 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>
    );
  }http://www.cppcns.com
}
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>
  );
}

Shttp://www.cppcns.comcrollableTabView选中颜色

标签内加上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</Texandroidt>
      <Text tabLabel='Tab 3'>Tab 3</Text>
    </ScrollableTabView>
  );
}

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