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

作者: laznrbfe | 来源:发表于2016-04-23 02:24 被阅读583次

零:当前情况

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 (
      <Svg width={88} height={22}>
        <G scale={0.5}>
          <Path fill="#ff5942" d="M63.8,29.9h-4.4c0,0,0.5,6.5,5.3,7.8c3.8,1.1,6-0.2,8.3-1.5c0.7-0.4,1.5-0.8,2.3-1.1 c6.6-2.3,9.3,2.1,9.3,2.1l3.8-1.7c0,0-4.5-7.4-14.5-4c-1.1,0.4-2.1,0.9-3,1.5c-1.5,0.8-2.9,1.7-4.9,1.1 C64.1,33.6,63.8,29.9,63.8,29.9L63.8,29.9z"/>
          <Path fill="#ff5942" d="M58.2,29.7h-3.4v4.4l0,0.2c0,0.5-0.3,0.7-0.7,0.6h-2.7h-0.2v2.7h0.2h1.8h0.6h1.8h0.1 c0.7,0.1,1.3-0.1,1.7-0.5c0.5-0.5,0.8-1.4,0.8-2.6L58.2,29.7L58.2,29.7z"/>
          <Path fill="#ff5942" d="M86.8,15.5h-1.8h-1.8h-0.4H81h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8H54v12.7 h3.5h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8H81h1.8l0.4,0c0.7,0,1.3-0.2,1.8-0.4c0.9-0.4,1.5-1,1.8-1.9 c0.2-0.5,0.3-0.5,0.3-1.2v-9.2H86.8L86.8,15.5z M83.4,24.7c0,0.4-0.2,0.6-0.7,0.5h-0.8h-2.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8 h-1.8h-1.8h-1.8h-2.8h-0.8v-2h0.8h2.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h2.8h1.4V24.7z M83.4,20.6h-1.4h-2.8h-1.8h-1.8h-1.8 h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-1.8h-2.8h-0.8v-2h0.8h2.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h2.8h1.4V20.6z"/>
          <Path fill="#ff5942" d="M87,10.7h-1.8h-1.5L84.1,8h1H87h0.7V4.8H87h-1.8h-1.8h-1.8h-1.8h-0.6h-1.8h-1.8h-1.5V3.8h-0.4h-1.8h-1.8 h-1.8h-1.5v1.1h-0.3h-1.8h-1.8h-1.8h-1.8h-0.6h-1.8h-1.8h-1.8h-0.2v3.4h0.2h1.8h2.1l0.5,2.5h-0.5h-2h-1.8h-0.7v3h0.7h1.8h1.8h1.8 h0.6h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.8h0.6h1.8h1.8h1.8H87h1v-3H87z M78.5,10.7L78.5,10.7h-1.2h-1.8h-1.8h-1.8h-1.8h-1.8 h-1.8h-1.8h-2.2l-0.1-0.3l-0.6-2.2h0.6h2.3h1.8h1.8h1.8h1.8h1.8h1.8h1.8h1.1h0.7L78.5,10.7z"/>
          <Polygon fill="#ff5942" points="22.3,6.5 19.4,3.9 8.8,14.6 11.7,17.3 "/>
          <Path fill="#ff5942" d="M48.4,15.7V4.3h-0.2H25.9h-0.5V19h0.5h1.3h17.6l0.2,0c0.7,0.1,0.9,0,1.4-0.1c0.9-0.2,1.5-0.8,1.8-1.6 C48.4,16.7,48.5,16.6,48.4,15.7z M44,14.9c0,0.3,0,0.5-0.1,0.7c-0.1,0.3-0.4,0.4-0.8,0.4H30h-0.2v-3H30h13.8H44V14.9z M44.2,10.1 h-0.3H30h-0.4V7.2H30h13.8h0.3L44.2,10.1L44.2,10.1z"/>
          <Path fill="#ff5942" d="M47,27.2h-0.2v-2.6H47h2.3v-3.4h-0.8H25.9h-0.5v3.4h0.5H42h0.4v2.6H42H24.2h0v3.3h0H42h0.4v1.6 c0,2-0.9,2.4-2.1,2.4c-5,0.2-7.9-3.4-14.5-2v3.4c4.1-0.6,7.7,0.8,10.7,1.8c3,0.9,6.4,0.5,7.6-0.1c1.2-0.6,2.4-1.5,2.6-3.5v-3.6H47 h2.7v-3.3H47L47,27.2z"/>
          <Polygon fill="#ff5942" points="16.6,21.2 16.6,37.9 17.1,37.9 18.3,37.9 19.4,37.9 20.4,37.9 20.4,17.3 24.6,13.1 21.5,10.4 10.9,21.1 14,23.9 "/>
          <Path fill="#ff5942" d="M127.3,23.1c-0.7-0.6-1.5-0.9-2.5-0.9h-15.1c-1,0-1.8,0.3-2.4,0.9c-0.6,0.7-0.9,1.4-0.9,2v9.4 c0,0.8,0.3,1.6,0.9,2.2c0.6,0.7,1.4,1,2.3,1l15.2,0c1.1,0,1.9-0.3,2.6-1c0.6-0.6,0.9-1.5,0.9-2.6v-8.6 C128.3,24.5,127.9,23.7,127.3,23.1z M124.8,32.9c0,0.5-0.1,0.9-0.4,1.1c-0.2,0.2-0.6,0.3-1.2,0.3H111c-0.8,0-1.2-0.4-1.2-1.3v-5.7 c0-0.5,0.1-0.8,0.4-1.1c0.2-0.2,0.4-0.3,0.7-0.3l0.6,0h11.7c1,0,1.6,0.4,1.6,1.3L124.8,32.9L124.8,32.9z"/>
          <Polygon fill="#ff5942" points="118.8,16.3 127.9,16.3 127.9,19.9 106.1,19.9 106.1,16.3 115.3,16.3 115.3,11.4 105.7,11.4 105.7,7.8 115.3,7.8 115.3,5.1 118.8,5.1 118.8,7.8 128.3,7.8 128.3,11.4 118.8,11.4 "/>
          <Path fill="#ff5942" d="M100.1,14.2h4.3l-7.2,12.9h6.7v3.6h-7.6c-1.3,0-2.2-0.2-2.7-0.5c-0.5-0.4-0.8-1-0.8-1.7 c0-0.8,0.5-2.2,1.6-4.1l2.9-5.1h-2.2c-0.8,0-1.4-0.2-1.8-0.7c-0.4-0.4-0.7-0.9-0.7-1.5c0-0.8,0.3-1.9,1-3.2l4.7-8.7h4.2l-5.7,10.5 h2.3L100.1,14.2L100.1,14.2z"/>
          <Polygon fill="#ff5942" points="104.3,37.6 93,37.6 93,34 104.3,34 "/>
          <Path fill="#ff5942" d="M162.9,9.4h0.8c0.5,0,1-0.1,1.7-0.4c0.7-0.3,1.3-0.8,1.7-1.3c0.6-0.8,1-1.8,1-2.8h-3.6 c-0.1,0.3-0.2,0.6-0.3,0.7c-0.1,0.2-0.5,0.3-1,0.3l-11,0c-0.8,0-1.5,0.3-2.1,0.9c-0.6,0.7-0.9,1.4-0.9,2.4v7.7c0,1,0.3,1.9,1,2.5 c0.6,0.6,1.4,0.9,2.5,0.9h6.2v-3.5l-4.7,0c-0.9,0-1.4-0.4-1.4-1.1v-0.6h8.4c1,2.2,2.3,3.8,3.9,4.8c0.7,0.4,1.7,0.8,3,1.2v-3.6 c-1-0.3-1.9-1-2.7-2.3h2.7v-3.6h-4.5C163.3,10.8,163.1,10.1,162.9,9.4z M152.8,11.5v-1.1c0-0.7,0.5-1,1.4-1l5.1,0l0.5,2.2H152.8z"/>
          <Path fill="#ff5942" d="M148,9.2h-2.1V5.3h-3.5v3.9h-4.7V5.3h-3.5v3.9h-1.7v3.6h1.7l0,9.7c0,1.6,0.2,3.1,0.7,4.5 c0.5,1.5,1.4,3.1,2.7,4.7c-1.5,1.1-3.2,1.9-5.1,2.6v3.5c2.5-0.6,5-1.7,7.7-3.5c2,1.5,4.5,2.7,7.6,3.5v-3.5c-1.7-0.4-3.4-1.2-5.1-2.5 c1.4-1.9,2.4-3.5,2.7-4.8c0.4-1.5,0.6-3.2,0.6-5.2l0-9h2.1V9.2L148,9.2z M142.4,22c0,1.9-0.1,3.3-0.4,4.1c-0.3,0.7-0.9,1.8-1.8,3.2 c-0.8-0.7-1.4-1.7-1.8-2.8c-0.4-1-0.6-2.3-0.6-4l0-9.7h4.7L142.4,22z"/>
          <Path fill="#ff5942" d="M167,23.1c-0.6-0.6-1.5-0.9-2.5-0.9h-11.8c-1.1,0-1.9,0.3-2.5,1c-0.7,0.7-1,1.5-1,2.3v9.2 c0,0.7,0.3,1.5,1,2.2c0.6,0.6,1.6,0.9,3,0.9h11.5c1.3,0,2.3-0.6,2.8-1.7c0.3-0.7,0.5-1.3,0.5-1.9v-8.9C168,24.5,167.7,23.8,167,23.1 z M152.8,27c0-0.8,0.5-1.2,1.6-1.2h8.6c1.1,0,1.6,0.4,1.6,1.3v1.1h-11.8V27z M164.5,32.8c0,0.5-0.1,0.9-0.3,1.1 c-0.2,0.2-0.6,0.3-1.2,0.3h-8.8c-1.1,0-1.7-0.4-1.5-1.2c0-0.1,0-0.1,0-0.1l0-1.2h11.8L164.5,32.8z"/>
        </G>
      </Svg>
    );
  }
}

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 (
      <Svg width={9} height={17}>
        <G scale={0.34}>
          <Path stroke="#ff5942" d="M24,3 L3,25 L24,47" strokeWidth={4} strokeCap="round" strokeJoin= "round" fill="none"/>
        </G>
      </Svg>
    );
  }
}

网友评论

RN

本文标题：[React-Native]得意婚嫁(仿)

本文链接：https://www.haomeiwen.com/subject/zovxrttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！