React Nativeプロジェクトのまとめ

実际のプロジェクト开発の経験、テクニック、そしてかつて若い无知の时に一绪に掘った穴をリストアップします...突っ込みを歓迎し、開発経験テクニックをお勧めします.次から次へと更新...

目次(許しの中で使えない目次ジャンプでしょう)

Exp 1:時間を節約するテストモード

Exp 2:継承された実際のアプリケーション

Exp 1:時間を節約するテストモード

时间はお金の実际のプロジェクトの开発の中で、私达は1セットの开発のテストのモードを必要として、私达の开発に便利で、开発のモード/発表のモードはただ1つのスイッチで制御して、速くて効率的です.前にゲームをしていたように、LOCAL_MODEがオンになると単機ゲームになり、オフになるとネットゲームになります.
次は私の実際の開発の一部です.

//  
var GlobalConfig = {
    DEV_MODE: false,              // true  false 

    SANDBOX_MODE: false,           //  
    
    TEST_MODE: true,               //  , 【 】 
    TEST_VIEW: 'views.TestView',   //  
    TEST_VIEW_PARAMS: {            //  【 】
        id: 100,
    }
};

//  【 】
GlobalConfig.SANDBOX_MODE = GlobalConfig.DEV_MODE ? GlobalConfig.SANDBOX_MODE : false

//  【 】
GlobalConfig.TEST_MODE = GlobalConfig.DEV_MODE ? GlobalConfig.TEST_MODE : false

DEBUG_MODE開発/発表

開発モードかリリースモードかを示すスイッチ

SANDBOX_MODE砂箱モード

実際のプロジェクトでは、いくつかのデータをシミュレートする必要があります.これらのデータは、正式に公開されたり、特定のテストが行われたりするときに必要ありません.例えば、登録プロセスでは、携帯電話番号、アカウント、パスワード、氏名、身分証明書、住所などの情報を登録する必要があります.

必要:

登録情報を記入するたびに、登録プロセス全体を迅速にテストする必要があります.

【開発モード】では、手動でデータテストを入力する必要がある場合もあります.この場合、【砂箱モード】

を閉じる必要があります.

テストデータ保存、次回の

の再利用に便利

テストデータは【発表モード】時にオフにし、オンライン製品のデータ

に影響を与えることができない.
実際のプロジェクトでは、 で使用されている砂箱モード

this.state = {
    account: '',
    pwd: '',
    pwdex: '',
};

if (config.SANDBOX_MODE) {
    this.state.account = utils.sandboxAccount()
    this.state.pwd = utils.sandboxPwd()
    this.state.pwdex = this.state.pwd
}

TEST_MODE快速テストモード

必要なインタフェースに直接ジャンプし、データを迅速にテストし、毎回プロセス全体を通じてテストインタフェースに到達する必要はありません.

TEST_MODE: true, //  , 【 】  
TEST_VIEW: 'views.TestView', //   
TEST_VIEW_PARAMS: { //  【 】 
    id: 100,
 }

Exp 2:継承の実用化

実際の開発では、私たちが開発中のように、電話番号で検索したり、メールで検索したり、QQ番号で検索したりするインタフェースの論理が非常に似ています.これらのインタフェースの論理は非常に似ています.クエリーが始まると、同じ菊を回したり、クエリーが終わると菊をキャンセルしたり、同じ情報を提示したりしません.別々に書くと、論理が複雑でメンテナンスが容易ではないだけでなく、後期にN個の同じインタフェースが追加されると、メンテナンスコストが倍増します.

ソリューション:継承

コンポーネントと競合することはありません.菊を回転させると、1つのコンポーネントに菊を配置して統一的に維持することができますが、検索の論理に関連して、継承することでしか実現できません.
ベースクラス

export default class SearchBase extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this.onInit()
    }

    onInit() {           //overrite
        //  
    }

    onSendMsgSucceed(data) {
        // do sth.. send msg succeed...
    }

    onSendMsgFailed() {             //overrite
        // do sth.. send msg failed...
    }

    onStartSearch(text) {           // overrite
        //  
    }

    render() {
        return (
            test
        );
    }
}

派生クラス

export default class SearchPhone extends SearchBase {
   //  
    onInit() {
        super.onInit()
        // SearchPhone init is here...
    }

    /**
     * overrite
     *  ， 
     * @param text
     */
    onStartSearch(text) {           // overrite
        let is_phone = utils.isPhone(text);
        if (isPhone) {
            ReqSearchInfoByPhone(text,
                (succ)=> {
                    let data = succ[0]
                    this.onSendMsgSucceed(data)
                }, (failed)=> {
                    this.onSendMsgFailed()
                }
            );
        }
    }
}

同じ論理をベースクラスSearchBaseに配置し、上書きする必要がある論理をベースクラスの関数に再ロードし、再実装します.

注意:

派生クラスのconstructorでは、es 6のclassは、ベースクラスを先に構築するthisであり、次いで派生クラスがthis

を使用することができるため、super(props)を実装する必要がある.

正常使用は

であるべきである.

let com = new SearchPhone()
com.init()

これにより、ベースクラスのコンストラクション関数、次に派生クラスのコンストラクション関数を呼び出すことができます.コンポーネントの呼び出しはRNによって制御されるため、init関数を追加することはできません.実際のコンストラクション関数の後、レンダリング前に、この関数を初期化関数のトリガポイントとして使用します.

componentWillMount() {
    this.onInit()
}