ReactNative 轮播图组件Banner的创建

最新推荐文章于 2024-09-08 09:23:09 发布

Hello_MR_Li

最新推荐文章于 2024-09-08 09:23:09 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/Hello_MR_Li/article/details/78010936

版权

本文介绍如何在ReactNative中创建一个轮播图组件Banner，使用ES5语法编写，依赖react-timer-mixin库实现定时切换。示例中展示了从本地json文件获取图片数据，如果使用网络图片则需要进行API请求。组件可直接导入并使用。

摘要由CSDN通过智能技术生成

==================================================================

//这里是单独的一个js文件，到时直接导入就可以用这里用的ES5的格式

//这里用的定时器导入计时器类库 react-timer-mixin 不过创建项目的时候就已经有了，可以在你项目的node_modules这个文件夹里面找一下有没有react-timer-mixin，如果没有就要自己导入导入方法导入计时器方法

==================================================================

我这里用的轮播图图片时本地图片var datas= require('../data/banner.json')

如果你用的网络图片就要网络请求然后获得json对象

可以创建一个banner,js文件然后把代码考进去

然后用的时候直接导入这里用的ES5的格式写的所以导入方式./component/banner为你banner,js文件的路径

var BannerDemo= require('./component/banner')

然后直接使用

轮播图效果

===================================================================

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image
} from 'react-native';

var datas= require('../data/banner.json')
var Dimensions=require('Dimensions')
var windowwidth=Dimensions.get('window').width
var TimerMixin=require('react-timer-mixin'