移动端Reactive Native轮播组件

总结下这段时间学习reactive native的一些东西，我们来认识一下，被炒得这么火的rn，究竟是个什么东西，以及如何去搭建自己的demo。

reactive native是什么

由facebook开发的一种应用框架，可以用react开发原生应用的框架。简单来说就是可以通过js和react来开发的一种框架。

react是什么

一套js的框架，也是facebook开源。特点：jsx语法(类似XML)，组件化模式，virtual DOM,单向数据流。

基本模式：每个react应用可视为组件的组合，而每个react组件由属性和状态来配置，当状态发生变化更新ui，组件的结构是由虚拟的dom来维护。

react native的应用实例

react native的模式

*跨端应用开发(ios,安卓，web) ，基于react的组件化，具备web的发布能力和原生应用的性能。

优点：开发效率高，迭代周期短 ; 复用性（对一些组件进行复用封装）热部署 ; 采用web的方式来开发native的应用

react native的环境搭建

这里，我还是遇到不少问题，大概写下安装过程，官网上大部分写的比较清楚。地址：http://reactnative.cn/docs/0.31/getting-started.html#content ，以下为安卓模拟器使用。

1：安装node

2:执行react native命令行

3:android studio安装(需要配置sdk)

4：安装bluestacks模拟器(首推) 下载地址：http://www.bluestacks.cn/

运行项目

当你所有的环境都搭建好后，在项目目录下，打开命令指示符，输入命令：

1	`crn-cli run-android`

　这时候，会自动启动模拟器，无需任何操作，但前提是确保你模拟器已经连接上，如何知道模拟器是否连接上呢？输入下面指令即可查看：

1	`adb devices`

当项目的apk已经完全安装好后，会自动加载启动我们的项目：

关于轮播组件的加载使用

首先在你的项目中安装该插件模块，然后在你项目代码中引入改模块，进行加载。需要注意的是，需要在某个页面使用该模块，就在该页面中引入该模块。

1	`$ npm i react-native-swiper --save`

我们来看下轮播组件在自己框架项目中的某个页面该如何进行引入，这里贴下代码更直观。

我们只需要在头部插入引入的插件，如下：

1	`import` `Swiper from` `‘react-native-swiper‘;`

在进行render的时候，进行调用，就可以轻松的使用该插件，应用到我们的开发项目中。

<Swiper style={styles.wrapper} showsButtons={true}>

<View style={styles.slide1}>

<Text style={styles.text}>Hello Swiper</Text>

</View>

<View style={styles.slide2}>

<Text style={styles.text}>Beautiful</Text>

</View>

<View style={styles.slide3}>

<Text style={styles.text}>And simple</Text>

</View>

</Swiper>

这里贴下该页面的完整代码，关于rn的样式问题，其实对比css差距还是比较大的，这里给个样式对比地址：https://github.com/foreverjiangting/react-native-stylesheet-guide

‘use strict‘;

import React, { Component } from ‘react‘;

import Swiper from ‘react-native-swiper‘;

import {

StyleSheet,

Text,

View,

} from ‘react-native‘;

export default class Page1 extends Page {

render() {

return (

<ViewPort>

<Swiper style={styles.wrapper} showsButtons={true}>

<View style={styles.slide1}>

<Text style={styles.text}>Hello Swiper</Text>

</View>

<View style={styles.slide2}>

<Text style={styles.text}>Beautiful</Text>

</View>

<View style={styles.slide3}>

<Text style={styles.text}>And simple</Text>

</View>

</Swiper>

</ViewPort>

);

}

const styles = StyleSheet.create({

wrapper: {

},

slide1: {

flex: 0.5,

justifyContent: ‘center‘,

alignItems: ‘center‘,

backgroundColor: ‘#9DD6EB‘,

},

slide2: {

flex: 1,

justifyContent: ‘center‘,

alignItems: ‘center‘,

backgroundColor: ‘#97CAE5‘,

},

slide3: {

flex: 1,

justifyContent: ‘center‘,

alignItems: ‘center‘,

backgroundColor: ‘#92BBD9‘,

},

text: {

color: ‘#fff‘,

fontSize: 30,

fontWeight: ‘bold‘,

}

});

关于各个模块之间的结构可看下下面代码，我们在index.android.js中添加如下代码：

‘use strict‘;

import {

AppRegistry //注册app

} from ‘react-native‘;

const theCompnent = require(‘./main‘);

AppRegistry.registerComponent(‘HelloTest‘, () => theCompnent);

//Attention: 此处module.exports必须保留

module.exports = theCompnent;

如何在pc端进行调试呢？

作为开发人员，没有调试工具，真的是很难过啊，还好模拟器提供了调试工具，我们来看下演示demo操作。打开js devmodel即可。调试很方便啦！对于我们在pc上修改的任何东西都会立即显示出来。

OK，打开浏览器，我们就可以很方便的看到我们自己的文件目录啦。这样我们就可以很方便的在chrome上进行开发啦。

最后

最后呢，给大家分享一下这两天听QCON的开发大会的资料，收获还是蛮大的，关键是尤雨溪男神，讲解vue.js，简直棒棒哒，贴上所有的ppt演讲资料，有兴趣的可以看下：

ppt链接网址：http://ppt.geekbang.org/qconsh2016?from=groupmessage&isappinstalled=0

作者：婷风

出处：http://www.cnblogs.com/jtjds/p/5990367.html

时间： 2024-12-05 03:03:47

移动端Reactive Native轮播组件的相关文章

基于Reactive Native轮播组件的应用开发以及移动端模拟器下的调试

总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive native是什么由facebook开发的一种应用框架,可以用react开发原生应用的框架.简单来说就是可以通过js和react来开发的一种框架. react是什么一套js的框架,也是facebook开源.特点:jsx语法(类似XML),组件化模式,virtual DOM,单向数据流. 基本模式:每个react应用可视为组件的组

移动端轮播组件swipeslide实现

从前只做过PC端轮播组件,实现方式也是margin负值和setTimeout.前一阵看到一个比较精简的移动端轮播组件的实现https://github.com/ximan/swipeSlide/blob/gh-pages/js/swipeSlide.js,用translate代替margin负值,并且添加了对touch事件的处理.在这里总结一下这个组件的实现. 所有的li绝对定位于容器左上角,宽度100%,高度100%. 1.组件init步骤: 1)如果设定了连续轮播,则复制first slid

【AmazeUI】图片轮播组件

这个组件在IE上一直很火,其实现可以参考<[JavaScript]原生态兼容IE6的图片轮播>(点击打开链接),AmazeUI同样在移动端提供这样的组件. 其效果如下,这个结果要在谷歌.野狐禅等浏览器的手机端调试模式才能看到,在PC端会布局错乱. 用户可以自由滑动,点击下方的圆点,选择自己要浏览的图片,当鼠标悬停在图片上,其组件则不会继续轮播图片. 实现代码如下:  <!doctype html> <html class="

mobile轮播组件——支持事件回调和队列（原生js实现）

mobile轮播组件,支持图片不定高,支持事件回调,队列,兼容主流webkit浏览器 demo地址:http://7li.github.io/components/swipe/ demo二维码: 测试地址:http://7li.github.io/components/swipe/test/ 仓库地址:https://github.com/7LI/swipe 本文出自:http://blog.csdn.net/nancle/article/details/44937531 仓促之际必有疏漏,请各

bootstrap轮播组件,大屏幕图片居中效果

在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中效果不同,大屏效果非常糟糕.比如这样一张图片, 为了图片自适应设置width=100%,在宽1920px下显示效果是这样的显然,因为图片设置了100%的宽度,其大部分内容被截去,显示非常糟糕. 后来想了想.有没有办法可以让图片真正的自适应呢并且居中呢,于是想到了css3背景图片属性backgro

MUI组件四：选择器、滚动条、单选框、区域滚动和轮播组件

目录(?)[+] 1.picker(选择器) mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现.*poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用压缩版本:mui.picker.min.js (1).popPicker 适用于弹出单级或多级选择器 a.通过new mui.PopPicker()初始

vue-awesome-swipe 基于vue使用的轮播组件使用

npm install vue-awesome-swiper --save //基于vue使用的轮播组件 <template> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="(banner,index) in banners" :key="index"> <img v-if="ban

vue中引入awesomeswiper的方法以及编写轮播组件

1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3.安装上面两个之后.再安装vue-awesome-swiper(必须在前两个安装过之后安装) npm install vue-awesome-swiper --save 4.安装完之后在package.json文件中查看一下,看是否安装上,如果安装成功,里面会显示对应的版本号 "less"

图片轮播组件实现

为什么要自己实现图片轮播,这其实已经是一个烂大街的功能,到处可见:网上也有很多现成的组件,那为什么还要自己来实现呢?主要的原因有两个性能定制化一个是网上的组件良莠不齐,在pc跑跑还可以,到了移动端,各种卡.另外一个原因,是因为有诸多定制化的交互要实现,所以还是自力更生,丰衣足食! 举两个栗子在自己撸代码之前,先来看看别人家的组件,正所谓:不看白不看.下面列举两种网上比较通用的轮播方案方案一方案二方案一在轮播至边界时,需要从这一端快速滑动至另外一端,体验不佳:方案二对边界轮播做了优