[React Native Androidアムウェイシリーズ]React Nativeのreactjsベース

この一連の課程はreact-nativeに関する知識をたくさん話しました.スタイル、下地、環境などについての知識があります.これからreactjsの基礎知識を勉強します.私たちのコードは、私たちが作成したコンポーネントに関する知識です.react-native-androidシリーズの教程をご覧になってください.このシリーズの教程に従って勉強すれば、react-native-androidの開発が上手になります.https://segmentfault.com/blog...この前を振り返ってみますと、こんなに多くの実践をしました.振り返って私達が書いたJS文書を見に来ました.
1.文法
私たちはreactjsを書く時、もちろんES 5の文法を使うことができます.

var reactNative = require('react-native');
var React = require('react');
var View = reactNative.View;
var Text = reactNative.Text;
var StyleSheet = reactNative.StyleSheet;
var AppRegistry = reactNative.AppRegistry;

var hellowReact = React.createClass({
    render: function () {
        return (
            
                    react-native-android    
            
        );  
    }   
});
AppRegistry.registerComponent('hellowReact', () => hellowReact);

ES 6の文法を使ってもいいです.reactにはpackagerが内蔵されています.エス5の文法を使うと、私たちは『クラス』を作成しました.つまり、コンポーネントです.この『クラス』にはレンダーの方法が必要です.このレンダー法の戻り値は、APPにレンダリングされた原生層を指定しています.これはアンディロイドのXmlレイアウトファイルと似ていると思います.
もちろん、前のように、es 6の文法を使って説明してもいいです.本物のクラスを使います.ここで、筆者はES 6の文法を使ってRNプログラムを書くことを提案します.

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    AppRegistry 
} from 'react-native';

class hellowReact extends Component {
    render() {
        return (
            
                    react-native-android    
            
        );  
    }   
}
AppRegistry.registerComponent('hellowReact', () => hellowReact);

2.JSX
と言わざるを得ませんが、jsxは本当に不思議なデザインで、jsコードの中に、xmlスタイルのラベルが入っています.最初はこういうコード形式に慣れないかもしれませんが、この文法に慣れたら、バスバーは使えません.

class hellowReact extends Component {
    render() {
        return (
            
                    react-native-android    
            
        );  
    }   
}

上記のコードから、jsxのタグの形はhtmlと似ています.同様に入れ子が必要なラベル層です.閉じたラベルも必要です.JSXにjs変数を混ぜる必要がある場合は、境界番号{}を使用して小包を行う必要があります.その中のjsは解析されます.JSXのラベルは、react-nativeベースライブラリから提供されます.もちろん、私たちのラベルも自分で作ったコンポーネントを使うことができます.以下のとおりです

class Com extends Component {
    render() {
        return (
                react-native-android    
        );  
    }   
}

class hellowReact extends Component {
    render() {
        return (
            
                
            
        );  
    }   
}

ここで注意したいのですが、テキストはTextラベルに包まれます.ラベルの先頭に属性を受け入れる.各ラベルのスタイルは、自分のスタイルにロードできます.また、私達がレンダリングしたjsxは、一番外側の層にはトップクラスの元素があるだけです.
3.コンポーネント
上に述べました.ラベルは自分で作ったコンポーネントでもいいです.私たちも簡単なコンポーネントを書きました.reactでは、自分のコンポーネントを書き、アプリケーションをより詳細に分割して複数のモジュールに分割することができます.モジュール化しやすいメンテナンスコードです.カスタマイズされたコンポーネントは、レンダリング時に、いくつかの属性を導入することができ、コンポーネント内でこれらの属性を取得することができます.

class Com extends Component {
    render() {
        return (
                   ：{this.props.param}
        );
    }
}

class hellowReact extends Component {
    render() {
        return (
            
                
            
        );  
    }   
}

図3.0.1
実は私達はJSXにクラス名を挿入しましたが、レンダリングする時にクラスの実例を生成します.ここで提示したいのですが、クラスの最初の文字は大文字でなければエラーが発生します.
図3.0.2
4状態と更新
ウェブページの開発では、私たちの思考は常に自分でデータを取得し、自分でビューを変更します.しかし、reactjsは私たちに全く違った体験を与えてくれました.reactjsは、私たちのプログラムはステートマシンだと思います.reactjsは私達のためにVM層を提供してくれました.実はまた振り返ってみます.私達はrender関数の戻り値を書く時、もう私達の状態をビューと融合したのではないですか?

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'hy'
        };
    }
    render() {
        return (
            
                      ：{this.state.name}
            
        );  
    }   
}

上のコードは、現在の構成の状態を現在のコンポーネントのビューに混ぜて示しています.私たちはコンポーネントを作成する時に初期状態を与えます.この状態はget Initial Stateというフック関数の戻り値の中でコンポーネントに与えられます.
reactjsは私達が状態を変更することを支持して、それによってビューの変化を引き起こします.上記のコードを改造して、ビューを変更するタイミングを増やします.

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    AppRegistry 
} from 'react-native';

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'hy'
        };
    }
    changeState() {
        this.setState({
            name: 'hysg'
        });
    }
    render() {
        return (
            
                      ：{this.state.name}
            
        );  
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'flex-start',
        backgroundColor: '#fff',
    },
});

AppRegistry.registerComponent('hellowReact', () => hellowReact);

上のコードを見て、ビューをクリックした時に、現在のコンポーネントの状態を更新します.強制的に状態を変更したわけではない.しかし、状態が変わりました.すぐに来たのは図4.0.1の初期状態です.クリックした後、状態が更新されました.図は直ちに図4.0.2に更新されました.
図4.0.1
図4.0.2
実は私達も推測できます.set Stateの方法は最終的に再度レンダーを呼び出しますが、中には特殊な処理があります.しかし、上記のコードの観点から、私達は状態を変更しただけです.最終的にビューの変化を引き起こしました.これはreactjsの特別な思想です.
5イベントのバインディング
私達のjsあるいは元生androidと違って、私達はいつもビューの外で、自分の論理コードの中で、特定の元素を選んで、その上でイベントを結び付けます.reactjsバインディングイベントはJSXに置かれています.

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'hy'
        };
    }
    changeState() {
        this.setState({
            name: 'hysg'
        });
    }
    render() {
        return (
            
                      ：{this.state.name}
            
        );  
    }   
};

このように、私たちはTouchEndイベントを最外層のViewに結び付けました.イベント名は直接ラベルの属性として書かれていますが、その値は対応するイベントハンドラ関数です.
react-webとは異なり、イベントトリガ関数のコンテキストは、デフォルトではこのコンポーネントです.この例では、私たちchangeStateのthisとは、hellowReactの例を指します.
6要素を取得する
先を信じる学生たちは、やはりjQueryのパターンに慣れていて、セレクタでDOMを選び、操作しています.でも、Reactにとっては、普段はstateとjsxを使ってビューを更新すればいいです.RNはDOMではないが、DOMを選択していないが、要素を取得することは避けられない.この場合は「構成に対する参照→refs属性」を使います.簡単な例を挙げると、この元素のページ上の位置と長さと幅を測定します.私達はrefsを使って、まずその元素を入手してから測定します.

class hellowReact extends Component {
    getPos() {
        this.refs.measureme
        .measure((fx, fy, width, height, px, py) => {
            console.log('     ：', 'x:', fx, 'y:', fy);
        });
    }
    render() {
        return (
            
                   
            
        );  
    }   
}

これをクリックして元素の位置を測定できます.
7グローバルオブジェクト
react Nativeでは、全体のオブジェクトを参照してwindowまたはglobalを使用することができます.それらはいずれもオブジェクトのDedicated WorkerGlobal Scopeを指します.ここではjscoreが提供する方法があります.また、reactnative注入の方法もあります.私たちはこれからreact注入の方法を詳しく説明します.
8モジュール化
ReactNativeは直接にcomonjs方式を使ってモジュール化コードを作成することができます.使用するpackagerパッケージの方式はwebpackまたはbrowserfyに類似していますので、requireを通じてモジュールを導入し、モジュール内の方法または変数をexportで暴露することができます.もちろん、直接にes 6 importを使うのも、自分で書いたモジュールを導入するのに便利です.次の例のように:

import amodule from './amodule';
var hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: amodule.getName()
        };
    }
    changeState() {
        this.setState({
            name: 'hysg'
        });
    }
    render() {
        return (
            
                      ：{this.state.name}
            
        );  
    }  
}

amodule.jsのコードは以下の通りです.

export default function () {
    return 'hy';
}

ただし、モジュールは一つの例です.
9授業後の作業
このセクションでは基礎学習を重視していますので、コードの例はアップロードされていません.上のコードを自分で叩いて実践してください.
続いて、みんなと一緒にreact-nativeのソースコードのコンパイルについて話をします.また、近いうちに私もreact-native-iosの一連の教程を開設します.離れないでください.私に注目してください.
もしこの文章が好きなら、下の紹介をクリックしてください.あなたの推薦は私の更なる文の動力になります.