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

零:當(dāng)前情況

marry.gif

marry_0606.gif

錄制效果不好胶背，參考0606_00.png,0606_01.png

0606_00.png

0606_01.png

一廷粒、前言

為什么選擇這個(gè)應(yīng)用模仿？

Redux架構(gòu)：該應(yīng)用的開(kāi)發(fā)人員使用了Redux架構(gòu)(這個(gè)不是重點(diǎn))涤姊。
SVG：該應(yīng)用除了Icon(圖標(biāo))及LaunchImage(啟動(dòng)圖)以外的圖片嗤放，其余均使用SVG(而且是純代碼)斤吐。一開(kāi)始只是為了了解SVG,而開(kāi)始模仿這個(gè)應(yīng)用厨喂。
動(dòng)畫(huà)：該應(yīng)用在多處地方使用了動(dòng)畫(huà)蜕煌。

注意

該項(xiàng)目開(kāi)發(fā)均在OS X系統(tǒng)上完成。
目前為止暫未使用iOS特有組件贫母，但本人未曾在Android設(shè)備上運(yùn)行該項(xiàng)目盒刚。

二因块、準(zhǔn)備

配置好React-Native開(kāi)發(fā)環(huán)境，React-Native中文文檔及React-Native英文文檔趾断。這一步?jīng)]有做好芋酌，將無(wú)法進(jìn)行開(kāi)發(fā)雁佳！
創(chuàng)建React-Native工程(本人以Marry命名此項(xiàng)目)。
打開(kāi)終端腮恩。
切換到存放工程的目錄秸滴。假設(shè)目錄為~/Documents/ReactNativeDemo募判，則需要在終端輸入cd ~/Documents/ReactNativeDemo，回車(chē)释液。
輸入react-native init Marry误债，回車(chē)。等待李命，直到創(chuàng)建完成箫老。
運(yùn)行項(xiàng)目耍鬓，運(yùn)行成功即完成了項(xiàng)目創(chuàng)建 (iOS和Android的設(shè)備/模擬器均需要運(yùn)行成功)牲蜀。
依賴(lài)文件
- 組件
- 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架構(gòu)相關(guān)
- redux

npm install --save redux

React 綁定庫(kù)：react-redux

npm install --save react-redux

開(kāi)發(fā)者工具：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如下(版本號(hào)可能會(huì)有所不同):

{
      "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)

本人將會(huì)把代碼托管到react-native-redux-marry完残。
推薦使用SourceTree代碼管理工具横漏。

三缎浇、開(kāi)發(fā)

第一天

題外話

5.20凌晨完成了一個(gè)愛(ài)心的SVG動(dòng)畫(huà)。

heart_svg.png

然后迷上了SVG.第一天就先從SVG開(kāi)始二蓝，剛好得意婚嫁里的icon幾乎都是SVG代碼實(shí)現(xiàn)的刊愚。

正文

查找圖片資源

下載-->解壓-->查看app里面圖片資源
發(fā)現(xiàn)只有AppIcon、LaunchImage商玫、網(wǎng)絡(luò)錯(cuò)誤(404.png)决帖、加載動(dòng)畫(huà)(loading.gif)蓖捶。這四類(lèi)圖片俊鱼，未發(fā)現(xiàn)其它圖片資源畅买。
抓取網(wǎng)絡(luò)數(shù)據(jù),也未發(fā)現(xiàn)相關(guān)圖片數(shù)據(jù)。飛行模式下帝火，第一次打開(kāi)應(yīng)用犀填，也可以得出此結(jié)論嗓违。

Airplane_Mode.png

查看app解壓后的文件蹂季，找到main.jsbundle偿洁，把里面的內(nèi)容拷貝到.txt文件里面。本人在終端中使用命令cp拷貝睬辐。
查看.text文件，發(fā)現(xiàn)里面有svg相關(guān)代碼鹃唯。Orz!!感受到了坡慌，來(lái)自世界深深的惡意藻三。

創(chuàng)建SVG文件

創(chuàng)建js/svg目錄(將用js目錄存放所有React Native相關(guān)代碼,svg目錄存放svg文件)棵帽。
Logo.js(推薦頁(yè)上面的“得意結(jié)婚”四個(gè)字)

// 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>
    );
  }
}

最后編輯于：2017.12.03 04:40:12

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末卿城，一起剝皮案震驚了整個(gè)濱河市铅搓，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌多望，老刑警劉巖怀偷，帶你破解...
沈念sama閱讀 222,627評(píng)論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件播玖，死亡現(xiàn)場(chǎng)離奇詭異黎棠，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)木西，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,180評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)八千，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人照皆，你說(shuō)我怎么就攤上這事沸停》呒兀” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 169,346評(píng)論 0贊 362
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)伙菊。經(jīng)常有香客問(wèn)我镜硕，道長(zhǎng)，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 60,097評(píng)論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任念恍，我火速辦了婚禮晚顷，結(jié)果婚禮上该默，老公的妹妹穿的比我還像新娘。我一直安慰自己匣摘，他們只是感情好音榜，可當(dāng)我...
茶點(diǎn)故事閱讀 69,100評(píng)論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布捧弃。她就那樣靜靜地躺著，像睡著了一般瞬场。火紅的嫁衣襯著肌膚如雪涧郊。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 52,696評(píng)論 1贊 312
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音枢希，去河邊找鬼朱沃。笑死，一個(gè)胖子當(dāng)著我的面吹牛搬卒，可吹牛的內(nèi)容都是我干的翎卓。我是一名探鬼主播，決...
沈念sama閱讀 41,165評(píng)論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼古戴！你這毒婦竟也來(lái)了矩肩？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 40,108評(píng)論 0贊 277
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎畦韭，沒(méi)想到半個(gè)月后肛跌，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體察郁，經(jīng)...
沈念sama閱讀 46,646評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡皮钠，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,709評(píng)論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了赠法。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片麦轰。...
茶點(diǎn)故事閱讀 40,861評(píng)論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖砖织，靈堂內(nèi)的尸體忽然破棺而出款侵，到底是詐尸還是另有隱情，我是刑警寧澤侧纯，帶...
沈念sama閱讀 36,527評(píng)論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布新锈，位于F島的核電站，受9級(jí)特大地震影響眶熬，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜娜氏，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,196評(píng)論 3贊 336
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一拳缠、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧贸弥，春花似錦窟坐、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,698評(píng)論 0贊 25
一樁弒父案哲鸳，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至最岗，卻和暖如春帕胆，著一層夾襖步出監(jiān)牢的瞬間朝捆，已是汗流浹背般渡。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,804評(píng)論 1贊 274
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留芙盘，地道東北人驯用。一個(gè)月前我還...
沈念sama閱讀 49,287評(píng)論 3贊 379
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像儒老，于是被迫代替她去往敵國(guó)和親蝴乔。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,860評(píng)論 2贊 361