二、文件内容解析

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'; // 还是依赖于Rect
import {
  AppRegistry, // 注册
  StyleSheet,  // 样式
  Text,        // 文本组件
  View,         // 视图组件
  Image,      // 图片组件
  TextInput,  // 输入组件
} from 'react-native'; // 组件

export default class DemoFirst extends Component {
  // 相当于OC-ViewDidLoad ---> 返回一个具体组件的内容
  render() {
    // 返回
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          你好，iOS!
        </Text>
        <Text> 我是一个测试标签</Text>
        <View style={myStyles.myStyles1}>
          <Text>我是第二标签</Text>
        </View>
      </View>
    );
  }
}

// 创建自己的样式
var myStyles = StyleSheet.create({
    myStyles1: {
      backgroundColor: 'red',
    },
});

// Demo工程中的样式
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,
  },
});

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