一個關於react-native的demo，詳細請轉GitHub

時間 2019-11-09

標籤一個關於 react native demo 詳細請轉 github 欄目 React 简体版

原文原文鏈接

react native

0 介紹

支持ios和android兩個平臺
下載：git clone https://github.com/chunlei36/react-native-full-example-chunlei.git
安裝：cd toilet --> npm install --> react-native run-ios(run-android)
服務端：具體看下面說明

一、express開發

1.1 npm環境設置

安裝node軟件：https://nodejs.org/en
安裝淘寶濾鏡：npm install -g cnpm --registry = https://registry.npm.taobao.org
設置全局的npm從國內下載資源， npmrc添加配置。mac下面地址爲 /Users/liumingming/.npmrc，修改strict-ssl=true 和 registry=https://registry.npm.taobao.org

1.2 express環境搭建

安裝express-generator：npm install -g express-generator，用戶快速建立express項目
生成項目模塊：進入到項目目錄 /User/liumm/A_study/app/toiletApp 下面，執行命令 express -e service，其中-e爲ejs模塊簡寫
在服務端項目安裝依賴：進入服務端項目 /User/liumm/A_study/app/toiletApp/service 執行命令 cnpm install，安裝依賴類庫
啓動項目：使用在當前目錄中使用 npm start啓動項目，其中start命令在package.json已經配置
預覽：啓動已經開發本地的 localhost:3000，訪問地址便可看見啓動的頁面
修改預覽：項目中app.js 文件爲服務啓動入口路徑。修改項目下面 views/index.ejs文件，重啓服務進行查看
express修改熱加載：安裝supervisor，npm install supervisor -g，修改項目自動更新

1.3 項目文件目錄組織

service
            bin
                www                       //爲項目啓動路徑
            node_modules                  //項目所依賴lib，初創項目使用npm install獲得
            public                        //靜態文件路徑，其後css或者js文件不加public，app.js文件已經設置
                css                       //項目中全部的ejs模板的css文件
                data                      //項目未使用數據庫，使用json進行數據交互
                    config.json           //閱讀模塊首頁配置json
                    cookies.json          //開心一刻數據json
                    it.json               //IT質詢json
                    manager.json          //管理json
                    prose.json            //散文json
                js                        //頁面前端交互js文件夾
                    lib                   //第三方lib包，包括經常使用的jquery、bootstrap
                    login.js              //首頁登陸js文件
                    ...                   //等等
            routes                        //後端路由
                 data.js                  //數據交互後端路由
                 index.js                 //首頁
            views                         //前端頁面視圖ejs
                error
                    404.ejs
                login.ejs
                index.ejs
                tuijian.ejs
                edit.ejs
            app.js                        //前端主入口文件
            package.json                  //配置信息，依賴配置部分至關於java的pom.xml文件

1.4 讀取接口設計

統一規定後端返回數據格式javascript

{
        status : 1,           //後端返回到頁面標示  1 成功 2 表單驗證失敗 3 系統異常 4 沒有權限
        data   : [],          //請求成功的數據信息  可爲對象，也能夠爲對象數組
        info   : '查詢成功'    //當前接口執行的操做語  登陸成功 查詢成功 表單驗證失敗 沒有權限等等
   }

笑料數據接口: /data/read/cookies
互聯網資訊接口: /data/read/it
管理數據接口: /data/read/manager
散文數據接口: /data/read/prose
閱讀模塊配置: /data/read/config

1.6 數據存儲接口設計

寫入操做數據都爲post請求，統一爲 /data/write，傳入參數以下：
刪除操做數據都爲post請求，統一爲 /data/delete，傳入參數以下：css

新增
    {
        type:   type,  //修改資源的類別
        title:  title, //文章標題
        url:    url,   //文章路徑
        img:    img    //圖片路徑
    }

刪除
    {
        type:   type,  //修改資源的類別
        id:     id,    //惟一id
    }

1.7 頁面開發

1.8 調試express代碼

安裝node-inspector: sudo cnpm install -g node-inspector
Terminal輸入: supervisor --debug ./bin/www
打開新的Terminal輸入: node-inspector & (注:也是在項目目錄之中)
輸入第三步顯示的地址，開發瀏覽器訪問輸入(http://127.0.0.1:8080/?port=5858)，接下來就和調試javascript同樣了
若是不想使用8080端口能夠修改: node-inspector & -p 8888

1.9 項目部署在服務器中

購買雲服務器平臺(能夠看看阿里雲、華爲雲、騰訊雲)，目的只是操做技術，並不是運維，只要能用就行
下載linux版的nodejs包，下載xshell進行安裝
購買好的雲服務帳號，使用shell進行登陸(網上教程不少，就是單純的登陸進去)
使用xshell自帶的工具rz(在命令行中輸入rz以後回車)，選擇下載好的nodejs，進行遠程導入，
使用命令: tar -xzf node-v4.4.4-linux-arm64.tar.gz 進行解壓(注:導入進行來的node包，能夠選擇你知道的路徑下面，便於後續查找)
進入到當前解壓node的目錄，輸入pwd命令，獲取當前文件夾的全路徑
使用軟鏈接快速使用命令(其中一個是node，一個是npm)，使用軟鏈接(相似快捷方式):
ln -s /home/kun/mysofltware/node-v0.10.28-linux-x64/bin/node /usr/local/bin/node
ln -s /home/kun/mysofltware/node-v0.10.28-linux-x64/bin/npm /usr/local/bin/npm
使用npm安裝開發中使用express相關的包
新建一個文件夾，在裏面使用git clone xxx.git 克隆你的項目，以後進入項目路徑(服務端)，輸入npm install 安裝相應的依賴
使用npm安裝pm2，用來啓動和查看node相關的服,可參考 http://www.javashuo.com/article/p-nufmoxvc-cb.html
使用命令: pm2 start ./bin/www 啓動服務，便可使用外網查看。
只是大體記錄步驟，後續視頻完善。

二、app開發

2.1 react native 環境搭建

首先和後端express開發一下，安裝node(上面操做過就能夠忽略)
使用cnpm安裝react-native-cli，命令以下：cnpm install -g react-native-cli
接下來能夠react-native 這個命令初始化項目，命令以下：react-native init toilet（其中toilet爲初始化項目的文件夾名稱，也就是項目名）
接下來進入項目路徑，cd toilet，執行命令react-native run-ios進行項目啓動。這樣就能夠看見初始化狀態下面的項目了
修改index.ios.js文件，保存。選中模擬器使用快捷鍵 command+r 進行修改後的刷新

2.2 文件目錄組織

toilet
            __tests__                        //測試文件
            android                          //安卓編譯以後的文件
            common                           //工具類
                utils.js
            html                             //靜態頁面，用webview進行顯示
                css
                image
                js
                nearby.html
                weather.html
            ios                              //ios編譯以後的文件
            ios_views                        //ios開發使用的組件，爲了區別和andriod
                read                         //閱讀模塊全部涉及到的組件
                    cateagory.js             //分類組件
                    list.js                  //列表組件
                    recommend.js             //推薦組件
                    search.js                //搜索組件
                    topic.js                 //置頂組件
                setting                      //設置組件
                    about.js                 //關於組件
                    detail.js                //詳情組件
                    tips.js                  //友情提示組件
                    help.js                  //幫助組件
                readPage.js                  //閱讀模塊
                settingPage.js               //設置模塊
                toiletPage.js                //衛生間模塊
                twebview.js                  //webview組件
                weatherPage.js               //天氣模塊
            node_modules                     //第三方依賴的jar
            index.ios.js                     //ios開發主程序入口
            package.json                     //配置文件