一、移動APP 開發技術選型進化

第一階段   Native

1.性能優秀

2.開發效率低下，不可跨端

第二階段    Native H5/Hybrid

1.Hybrid多端運行，解決了開發效率問題

2.性能存在瓶頸

現階段  Native H5/Hybrid React Native

二、開發進階-頁面性能

頁面(Page)切換卡頓問題

頁面切換(push)和render同時進行，對復雜頁面場景，會有卡頓問題

解決方案：1.調整頁面切換動畫時間

                 2.使用InteractionManager API頁面切換完成，再render

三、開發進階-統一Storage

統一Storage提供

1.Storage.load(params,callback)

2.Storage.remove(params)

3.Storage.save(parmas)

說明:

Native/RN/H5通用

Save API,params中domain區分不同業務

Save API,params中expires可控制過期時間

Save API,params中isSecret可控制是否加密存儲

四、開發進階-IconFont

Iconfont使用

1.文件大小，可以設置顏色，靈活性高

2.Font文件中每個圖標對應一個Unicode碼

使用步驟

1.http://iconfont/平臺創建下載字體文件

2.導出字體文件，項目/文件命名規則crn_font_xxx,前綴固定；

3.注冊字體文件CRNDev.registerIconFont()測試環境使用，生產環境會動態查找注冊；

4.設置組件style,fontfamily = 項目/文件名   Note:iconfont項目/文件名不能手動修改

common.js

export default StyleSheet.create({
    commonIcon: {
        fontFamily: 'ct_font_common',
    },
    diyTourIcon: {
        fontFamily: 'crn_font_diytour2'
    },
    diyTourIcon2: {
        fontFamily: 'crn_font_diyTour'
    }
    
})

頁面上使用icon引用字體： icon.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {Text,Dimensions} from 'react-native'
import baseStyle,{color} from "../../styles/base/common"

export default class Icon extends Component {
    render() {
        let { size, color,value, style,type } = this.props
        let fontFamily = baseStyle.diyTourIcon
        if(type==='common'){
            fontFamily=baseStyle.commonIcon
        }else if(type==='dp2'){
            fontFamily=baseStyle.diyTourIcon2
        }
        return (
            <Text
                style={[
                    fontFamily,
                    {
                        color,
                        fontSize: size
                    },
                    style
                ]}
            >
            {value}</Text>
        )
    }

}
Icon.propTypes = {
    size: PropTypes.number,
    color: PropTypes.string,
    value: PropTypes.string,
    style: Text.propTypes.style,
}
Icon.defaultProps = {
    size: 20,
    color: color.cBule,
    value:'',
}

開發環境常見問題

1.icon不顯示，一般是由于下載的文件名被修改過文件名

生產環境常見問題

1.圖標非自己設計的icon，一般是被系統其它unicode占用，到iconfont平臺生成新的code即可

五、開發常見問題

A.原因: Native Runtime 和 RN JS 代碼API 不一致

解決方案：

1.刪除node_modules

2.修改package.json中依賴的相關JS組件版本

3.重裝node_modules

B.原因：依賴CRN版本和App版本不一致 0.51 runtime的App運行0.41的Js代碼

解決方案：

1.刪除node_modules

2.修改package.json中CRN的依賴分支

3.重裝node_modules

C.原因：從node_modules查找模塊出錯

解決方案：

1.npm list |grep react* 查看是否有其他組件使用不同的react版本

2.刪除node_modules

3.重啟電腦，重新安裝node_modules

六、CRN發布

發布流程：

1.創建項目(發布計劃)，設置代碼倉庫分支，入口文件，發布版本、頻道

2.新增版本，FAT->UAT->生產 環境逐一發布

3.支持灰度發布、暫停發布

4.發布結果查看，支持分APP版本查看下載量、使用量

CRN-Web框架

crn-cli run-patch  替換RN依賴文件

crn-cli pack 本地打包

crn-cli openUrl 在App中打開url

crn-cli example 建立API示例工程

crn默認會依賴常用第三方庫 crn-ext提供常用第三方庫，業務按需依賴 eg: react-native-swiper

頁面路由與跳轉

page.push()

page.pop()

page.popToPage()

page.replace()

page.replaceAtIndex()

pop到容器最后一層后直接關閉CRN容器

Android物理鍵回退：onBackAndroid()

組件和Page生命周期：

componentWillMount           PageWillAppear

componentDidMount            PageDidAppear

componentWillUpdate           PageWillDisappear

componentDidUpdate           PageDidDisappear

componentWillUnMount

CRN頁面加載流程

包安裝 -> CRN框架代碼執行(后臺預加載) -> 業務JS -> 代碼執行（a.頁面渲染 b.初始頁面渲染->網絡請求->頁面渲染）

router.js

import { App,lazyRequire } from '@ctrip/crn';
import pageConfig from './constants/pageConfig';
const DIYIndex = lazyRequire('./containers/diyIndex');
const DPCalendar = lazyRequire('./containers/dpCalendar');
const CityList = lazyRequire('./containers/cityList');
const DPIndex = lazyRequire('./containers/dpIndex');
const Confirm = lazyRequire('./containers/confirm');
const DPConfirm = lazyRequire('./containers/dpConfirm');
const Passenger = lazyRequire('./containers/passenger');
const FlightList = lazyRequire('./modules/flightList/container/flightList');
const HotelDetail = lazyRequire('./containers/hotelDetail/hotelDetail');

const pages = [
    {
        component: DIYIndex,
        name: pageConfig.DIYINDEX.pageName,
        // isInitialPage: true 
    },
    {
        component: DPCalendar,
        name: pageConfig.DPCALENDAR.pageName,
        // isInitialPage: true 
    }, {
        component: CityList,
        name: pageConfig.CITYLIST.pageName,
    },
    {
        component: DPIndex,
        name: pageConfig.DPINDEX.pageName
    }, {
        component: DPConfirm,
        name: pageConfig.DP_CONFIRM,
        // isInitialPage: true
    }, {
        component: Confirm,
        name: pageConfig.SDP_CONFIRM.pageName
    }, {
        component: FlightList,
        name: pageConfig.FLIGHT_LIST.pageName,
        // isInitialPage: true
    },
    {
        component: Passenger,
        name: pageConfig.PASSENGER.pageName,
    }, 
    {
        component: HotelDetail,
        name: pageConfig.HOTEL_DETAIL.pageName,
        isInitialPage: true
    }
];

const navigationBarConfig = {
    hide: true, // 默認為 false
    backgroundColor: "#19A0F0", // 導航欄背景色
};

export default class Router extends App {
    constructor(props) {
        super(props);
        this.init({
            pages,
            navigationBarConfig,
        });
    }
}

index.ios.js

/**
 * Sample Ctrip React Native App
 * http://crn.site.ctripcorp.com/
 * @flow
 *
 * 此處有幾點需要注意:
 * 1、必須將AppRegistry.registerComponent寫在該文件中, 并且將AppComponent從其他處require進來;
 * 2、必須添加一個module.exports這一句, 發生產包必須這么做;
 */

'use strict';

import {
    AppRegistry
} from 'react-native';

const DIYTOUR = require('./main');

AppRegistry.registerComponent('diytour', () => DIYTOUR);

//Attention: 此處module.exports必須保留
module.exports = DIYTOUR;

index.android.js

/**
 * Sample Ctrip React Native App
 * http://crn.site.ctripcorp.com/
 * @flow
 */

'use strict';

import {
  AppRegistry,
} from 'react-native';

const DIYTOUR = require('./main');
AppRegistry.registerComponent('diytour', () => DIYTOUR);

// Attention: 此處module.exports必須保留
module.exports = DIYTOUR;

main.js

'use strict';

import { CRNDev } from '@ctrip/crn';

import DIYTOUR from './src/app';

// global.console = {
//   timeEnd: ()=>{},
//   time: ()=>{},
//   info: () => {},
//   log: () => {},
//   warn: () => {},
//   debug: () => {},
//   error: () => {},
// };
if (__DEV__) {
  CRNDev.registryIconFont({
    fontList:[
      'http://10.32.228.8:5389/fonts/crn_font_diytour2.ttf',
      'http://10.32.228.8:5389/fonts/crn_font_diyTour.ttf',
    ]
  }, (result) => {
    console.log('ttf文件安裝' + (result ? '成功' : '失敗'));
  });
}

module.exports = DIYTOUR;

import打包后->require -> JS exe -> Cache Ret -> LazyRequire的使用（LazyRequire加載Page子類，只加載需要的Page）