购物app shopping-react-native
一、前言
整个代码,仅供参考,对于一个有经验的开发人员,从看js Reactjs React-Native 到写demo总共2天时间就够了,由于没有做过前端,代码写的一般,见谅;后去会持续更新 **代码在底部**
二、环境配置
(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦。 (2)在Mac上安装Xcode,建议Xcode 6.3以上版本 (3)安装node.js:https://nodejs.org/download/ (4)建议安装watchman,终端命令:brew install watchman (5)安装flow:brew install flow
三、Hello,React-Native
创建一个React-Native的项目,因此可以按照下面的步骤:
打开终端
(1)安装命令行工具:sudo npm install -g react-native-cli (2)创建一个空项目:react-native init HelloWorld (3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。 (4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。 (5)android 开发者请安装android开发环境,后打开模拟器 使用react-native run-android命令来运行程序
启动完成后,你会看到React-Packger和iOS模拟器(android模拟器)
四、shopping-react-native demo
图片轮播使用的是三方组件react-native-swiper,我们启动npm命令行,在项目的根目录使用如下命令安装模块。
$ npm install react-native-swiper --save $ npm i react-timer-mixin --save
实战内容
9宫格,轮播图,导航栏,tab栏,Webview,ListView,ScrollView等
效果图预览
代码地址
github地址
https://github.com/bigsui/shopping-react-native.git
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。