React-Native 学习第二天：初识RN的代码

忙碌了很久，业务工作终于可以稍稍轻松一点了，赶紧继续学习React-Native。初识RN，先来看看RN的最简单的页面结构吧。
打开index.ios.js页面：
第一句：

import React, { Component } from 'react';

这是RN 0.26后导入React的方式，这意思是，导入‘react’文件里export的一个默认的组件，将其命名为React以及Component这个非默认组件。

接下来第二部分：

import {
  AppRegistry,//内置模块，“注册操作”
  StyleSheet, //个人理解：当前组件中用到的组件
  Text,       //个人理解：当前组件中用到的组件
  View        //个人理解：当前组件中用到的组件
} from 'react-native';

再往下面看，第三部分

//定义了一个名为TestRN的新的组件
export default class TestRN extends Component {
  //render() 这是一个必须的方法，返回一些用户渲染结构的JSX语句
  render() {
    return (
        <View style={styles.container}>
        <Text style={styles.welcome}>
          RN学习第二天
        </Text>
        <Text style={styles.instructions}>
          终于解决新建的时候运行报错的问题啦！
        </Text>
      </View>
    );
  }
}

继续，自定义样式

//样式选择器，类似html中的标签选择器,自定义一些样式
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模块则是用来告知React Native哪一个组件被注册为整个应用的根容器
//一般在整个应用里AppRegistry.registerComponent这个方法只会调用一次
AppRegistry.registerComponent('TestRN', () => TestRN);

最后显示效果：

image.png