零:当前情况
marry_0606.gif
录制效果不好,参考0606_00.png,0606_01.png
一、前言
为什么选择这个应用模仿?
- Redux架构:该应用的开发人员使用了Redux架构(这个不是重点)。
- SVG:该应用除了Icon(图标)及LaunchImage(启动图)以外的图片,其余均使用SVG(而且是纯代码)。一开始只是为了了解SVG,而开始模仿这个应用。
- 动画:该应用在多处地方使用了动画。
注意
- 该项目开发均在OS X系统上完成。
- 目前为止暂未使用iOS特有组件,但本人未曾在Android设备上运行该项目。
二、准备
- 配置好React-Native开发环境,React-Native中文文档及React-Native英文文档。这一步没有做好,将无法进行开发!
- 创建React-Native工程(本人以Marry命名此项目)。
- 打开终端。
- 切换到存放工程的目录。假设目录为
~/Documents/ReactNativeDemo
,则需要在终端输入cd ~/Documents/ReactNativeDemo
,回车。 - 输入
react-native init Marry
,回车。等待,直到创建完成。 - 运行项目,运行成功即完成了项目创建 (iOS和Android的设备/模拟器均需要运行成功)。
- 依赖文件
- 组件
- react-native-svg
npm install react-native-svg --save
rnpm link react-native-svg
如果输出-bash: rnpm: command not found
,则表明未安装rnpm
。
解决:输入npm i rnpm -g
,再输入rnpm link react-native-svg
即可.
- react-native-tab-navigator
npm install react-native-tab-navigator --save
- react-native-scrollable-tab-view
npm install react-native-scrollable-tab-view --save
- Redux架构相关
- redux
npm install --save redux
- React 绑定库:react-redux
npm install --save react-redux
- 开发者工具:redux-devtools
npm install --save-dev redux-devtools
- middleware(中间件):redux-thunk或者redux-promise,这里我们使用redux-thunk.
npm install --save redux-thunk
- normalizr
npm install --save normalizr
热更新(该功能暂缺)
最终package.json如下(版本号可能会有所不同):
{
"name": "Marry",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"normalizr": "^2.0.1",
"react": "^0.14.8",
"react-native": "^0.24.1",
"react-native-scrollable-tab-view": "^0.4.1",
"react-native-svg": "^1.0.1",
"react-native-tab-navigator": "^0.2.18",
"react-redux": "^4.4.5",
"redux": "^3.5.1",
"redux-thunk": "^2.0.1"
},
"devDependencies": {
"redux-devtools": "^3.2.0"
}
}
代码管理(github)
- 本人将会把代码托管到react-native-redux-marry。
- 推荐使用SourceTree代码管理工具。
三、开发
第一天
题外话
5.20凌晨完成了一个爱心的SVG动画。
然后迷上了SVG.第一天就先从SVG开始,刚好得意婚嫁里的icon几乎都是SVG代码实现的。
正文
查找图片资源
- 下载-->解压-->查看app里面图片资源
- 发现只有AppIcon、LaunchImage、网络错误(404.png)、加载动画(loading.gif)。这四类图片,未发现其它图片资源。
- 抓取网络数据,也未发现相关图片数据。飞行模式下,第一次打开应用,也可以得出此结论。
- 查看app解压后的文件,找到main.jsbundle,把里面的内容拷贝到.txt文件里面。本人在终端中使用命令cp拷贝。
- 查看.text文件,发现里面有svg相关代码。Orz!!感受到了,来自世界深深的恶意。
创建SVG文件
- 创建js/svg目录(将用js目录存放所有React Native相关代码,svg目录存放svg文件)。
- Logo.js(推荐页上面的“得意结婚”四个字)
// Logo.js
import React, { Component } from 'react';
import Svg, {
Circle,
G,
Path,
Polygon,
} from 'react-native-svg';
export default class Logo extends Component {
render(){
return (
);
}
}
- Back.js返回按钮
import React, { Component } from 'react';
import Svg, {
Circle,
G,
Path,
Polygon,
} from 'react-native-svg';
export default class Back extends Component {
render(){
return (
);
}
}