React-native試食プラン-シーン切り替え(Navigator)

8154 ワード
react-native node.js クロス・プラットフォーム and roid iOs web
 
       《react-native     －    》    react－native      ，      react－native       。                ，          “hello world”   ，           ，            。              ，               index.android.js   ，        ，       ：react－native           ？      ，                      。
  シーンdemo 
を切り替える
この章では、demo,react-nativeシーン切り替えのdemoダウンロードアドレスに重点を置きます.https://github.com/liuguangli/RN-DemoForChangeSence. 
まず効果を出して、現象から本質まで人類の一般的な認知の法則に合って、読者にdemoをダウンロードして自分で研究することを提案して、私もあなたがdemoを研究してから後文を読む必要がないことを望んでいます. Navigatorウォーミングアップ
react-natvieでページを切り替える重要なコンポーネントの一つはNavigatorです.ここではdemoで使用されているいくつかの重要な属性と方法だけを紹介し、詳細はここをクリックして公式ドキュメントの紹介を見ることができます.
1 initialRoute 
Navigatorのプロパティで、Navigatorシーンスタックの最初のシーン情報routeを記述します.構造タイプで、name、indexなどの記述情報を提供します.
2 renderSence 
Navigatorの1つの方法で、Navigatorが作成またはpush(route)/pop()メソッド呼び出しを行うときにrenderSence(route,navigator)メソッドをコールバックし、2つのパラメータ:routeとnavigator自体を出入りする.
3 push 
シーンジャンプ:routeを指定し、コールバックメソッドrenderSence()でrouteに基づいて指定したsenceを返します.senceは任意の可視化コンポーネントまたはコンテナです.  
4 pop 
前のシーンに戻ります.このdemo 
を実現するために一歩一歩
1.入口(index.android.js)
まずreactの最初のエントリコンポーネントを完了し、appに登録します.
まず、使用するコンストラクションを導入します.
  var React = require('react-native');
var {
  AppRegistry,
  Navigator,
} = React; 
  
AppRegistryは、プログラムエントリコンポーネントを登録するために使用されます.Navigatorは、シーン変換を操作するために使用される最初のコンポーネントです.
コンポーネントの作成://       
var ChangeSenceProject = React.createClass({
  render: function() {
    var initialRoute = {name:"A"};
    return ()
  },

});
  
アプリケーションへの登録://    
AppRegistry.registerComponent('ChangeSenceProject', () => ChangeSenceProject);
  
僕らが
ChangeSenceProjectのエントリメソッドrenderでNavigatorコンポーネントを使用し、最初のrouteオブジェクトを提供します.
{name:"A"}とrenderSenceメソッドは、このメソッドを実装する必要がありますので、
React.createClass 
前にrenderSenceメソッドを実装しましたが、メソッド名は次のように定義されています.
RouteMapper //Navigator    
var RouteMapper = function(route,navigation,onComponent){
   //todo ,  route        
};
  
ここで私の門は論理を実現しないで、私の門が2つのシーンのページの編纂を完成してからここの論理を実現します.
2. Android native 
ReactRootViewを使用して、インタラクティブなコンポーネントを搭載します.
main_activity.xml: 
    
  
MainActivity.java package com.changesence;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        ((ReactRootView) findViewById(R.id.react_root_view))
                .startReactApplication(mReactInstanceManager, "ChangeSenceProject", null);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}
  
注:startReactApplication()メソッドの最初のパラメータは、AppRegistryに登録したプロジェクト名と同じでなければなりません.ここまで、プロジェクトは実行できますが、RouteMapperはまだ実装されていないので、シーンロジックを提供する必要があります.
3 . シーンA(SenceA.js)
シーンAでは1行の文字を簡単に表示し、文字をクリックしてシーンBにジャンプします.
直接コード:Sencea.js 'use strict';
var React = require('react-native');
var {
  TouchableNativeFeedback,
  Navigator,
  StyleSheet,
  Text,
  View,
} = React;
var SenceA = React.createClass({
  //touch    
 touch: function(target:Object){
  this.props.navigator.push(
   {
    title:"B",
    name:"B"
   } 
  );
 },
 render: function() {
 	return (
      
       
         ' this is SenceA,click to SenceB'
         
       
      );
 },
});
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
//    ，   require
module.exports = SenceA;
  
4シーンB
シーン比は、シーンAと同様、表示内容が異なる.直接上コード:SenceB.js 'use strict';
var React = require('react-native');
var {
  TouchableNativeFeedback,
  Navigator,
  StyleSheet,
  Text,
  View,
} = React;

var SenceB = React.createClass({
 touch: function(target:Object){
   if (this.props.navigator.getCurrentRoutes().length>1) {
    this.props.navigator.pop();
   };
  
 },
 render: function() {
 	return (
      
       
         ' this is sence B,click to sence A'
         
       
      );
 },
});
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFC00',
  },
});
module.exports = SenceB;
  
5はindexです.android.jsはシーンを導入し,RouteMapperロジックを完備させる.
シーンの導入://      
var SenceA = require('./SenceA');
var SenceB = require('./SenceB');
  
完全
RouteMapper: //Navigator    
var RouteMapper = function(route,navigation,onComponent){
   _navigator = navigation;
    if (route.name === 'A') {
      console.log("return SenceA");
      return (
       
      );
    } else if (route.name==="B"){
      console.log("return SenceB");
      return (
        
      );
    } 
};
  武器準備
react-navtiveがモバイルアプリケーション開発のもう一つの戦場であれば、ここまで来たら戦場がどこにあるか、次は武器をどのように練習するかを知っています.react-nativeのプログラミングを熟知するには、まず以下の武器を身につけなければなりません.
1 jsベース
2 node.js 
3 jsx構文
4 flexboxレイアウト
注:react-nativeが出て間もなくドキュメントの資料は多くなくて、文章の不足なところは指摘を歓迎して、一緒に新しい技術、新しい思想を研究します.
初心者にやさしい入門
MySQL