React-Native Demo 购物app
来源:互联网 发布:培训软件 编辑:程序博客网 时间:2024/06/09 20:59
购物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
0 0
- React-Native Demo 购物app
- [React Native]豆瓣电影APP Demo
- React-Native 组件练习-购物app侧滑菜单
- React Native官方DEMO
- react native demo创建
- react-native 组件demo
- react-native demo
- React-Native开发app
- React Native App
- React Native开发APP
- windows native app demo
- react native 实战[商城DEMO]
- React Native Redux TodoList Demo
- Ios Sample React Native App
- 第一个React native app
- React Native简单的APP
- React-Native高校图书馆APP
- 快速创建React Native App
- IOS 世界标准时间UTC /GMT 转为当前系统时区对应的时间
- fir.im Weekly - 热门 iOS 第三方库大盘点
- XML基础
- 7月出走
- Windows上的Java环境配置
- React-Native Demo 购物app
- iOS每日一记-----之 简单的按钮切换
- JSP内置对象response
- Android 快速开发框架 Xutils (适合初学者)
- R语言学习之矩阵的建立
- 类方法的实现
- NSLog各种打印
- JAVA设计模式(12) —<结构型>享元模式(Flyweight)
- EL表达式从request和session中取值