React Native代码结构

来看看index.ios.js

第一段是导入需要的包

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

第二段构建入口类，React提供了React.createClass的方法创建一个类。里面的render方法就是渲染视图用的。return返回的是视图的模板代码，其实这是JSX的模板语法。

export default class MyProject extends Component {
  render() {
    return (
        
          
            React-Native入门学习
          
          
          
        
    );
  }
}

第三段StyleSheet.create提供视图的样式，用JS的自面量表达了css样式。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'red',
  },
  pic: {
    width:100,
    height:100,
  },
});

下面这一句最重要，是注册应用入口。

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