[React-Native]得意婚嫁(仿)

零:当前情况

marry.gif

marry_0606.gif

录制效果不好，参考0606_00.png,0606_01.png

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动画。

heart_svg.png

然后迷上了SVG.第一天就先从SVG开始，刚好得意婚嫁里的icon几乎都是SVG代码实现的。

正文

查找图片资源

下载-->解压-->查看app里面图片资源
发现只有AppIcon、LaunchImage、网络错误(404.png)、加载动画(loading.gif)。这四类图片，未发现其它图片资源。
抓取网络数据,也未发现相关图片数据。飞行模式下，第一次打开应用，也可以得出此结论。

Airplane_Mode.png

查看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 (
      
    );
  }
}