您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 399人已围观

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

react-native 渐变色背景

使用react-native-linear-gradient插件

1.安装

npm react-native-linear-gradient

2.链接

react-native link react-native-linear-gradient

3.代码使用

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 (                               index + ''}                     index={1}                     autoplayTimeout={3}                     horizontal={true}                     onMomentumScrollEnd={(e, state, context) => {                     }}                     dot={}                     activeDot={}                     paginationStyle={{                         bottom: 10                     }}>                                                                                                                                                                                                                                                                                                                           );     } } 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 (                                                                     );     } } const styles = StyleSheet.create({     container: {         height: '100%'     } })

ScrollableTabView默认页面

标签内加上initialPage并赋值下标即可

render() {     return (                      Tab 1             Tab 2             Tab 3              ); }

ScrollableTabView背景颜色

标签内加上tabBarBackgroundColor并赋值即可

render() {     return (                      Tab 1             Tab 2             Tab 3              ); }

ScrollableTabView选中颜色

标签内加上tabBarActiveTextColor并赋值即可

render() {     return (                      Tab 1             Tab 2             Tab 3              ); }

ScrollableTabView未选中颜色

标签内加上tabBarInactiveTextColor并赋值即可

render() {     return (                      Tab 1             Tab 2             Tab 3              ); }

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

您可能感兴趣的文章:

上一篇：Node.js 源码阅读深入理解cjs模块系统_node.js_

下一篇：前端Vue.js实现json数据导出到doc_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网