React-Nativeのindex.ios.js解読

コードを絞る前にはやはり効果をはっきりさせたほうがいいです.さもなければ、水を流すようなものは空が暗くなるのに、なぜこの姿勢で絞るのか分かりません.気まずいですか?それを知るには、そのためにコードを絞る姿勢の重要性についても知らなければなりません.
React.nativeはfacebookのオープンソースのセットであり、JavaScriptに基づくオープンソースのフレームワークであり、モバイルデバイスの開発に便利である.また、アプリのUIとデータを適時に更新することができ、配置にも便利です.
react-nativeのiosプロジェクトでは、インターフェース構築部分はjsファイルです.index.ios.js.以下はこの文書を解読して、後続の開発において各部分の役割が分かりやすくなります.
1.引用React

import React, { Component } from 'react';

2.コントロールの導入

import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableOpacity
} from 'react-native';

3.スタイルの設定

//    
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

役割:「ハローワールド」テキストに適用されるスタイルを定義します.
React NativeはCSSを使用して、アプリケーションインターフェースのスタイルを定義します.
4.Reactコンポーネントに対応するクラスを作成する

export default class HelloWorld extends Component {
  render() {
    return (
      
        
          Welcome to React Native!
        
        
          To get started, edit index.android.js
        
        
          Double tap R on your keyboard to reload,{'
'}
          Shake or press menu button for dev menu
        
      
    );
  }
}

役割:さまざまな挙動と属性を含む作成されるコンポーネントを説明します.
説明してください

コンポーネントレンダリングの方法:

render() {
    return ();
    }

注意:コンポーネントがレンダリングされる場合にのみ、レンダーインターフェース方法を実現しなければならない.レンダー方法のみがコンテンツコンポーネントの内容を出力するためのものである.他のインターフェース方法は全部オプションです.

タグ定義ビュー

機能:表示領域を設定し、iOSのUIViewコントロール(Objective-cとSwift)に相当します.

タグ定義テキスト

          Welcome to React Native!

機能:文字列を設定して表示します.iOSのUICLabelコントロール(Objective-cとSwift)に相当します.

定義プログラム入り口

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

作用:App Registryのregister Componentの方法で、Appの入り口を定義して、ルートのコンポーネントを提供しました.
回転:http://blog.csdn.net/maoyingyong/article/details/46439951