React-Native之Hello World

开发环境: ubuntu16.04
IDE: ATOM
React Native项目的目录结构暂时不考虑,打开HelloWorld项目文件夹,找到index.android.js文件。
index.android.js文件就是React-Native JS 开发之旅的入口文件了。用文本编辑器打开index.android.js文件。

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

export default class HelloWorld extends Component {
  render() {
    return (
      <Text style={styles.welcome}>Hello world!</Text>
    );
  }
}

const styles = StyleSheet.create({
  welcome: {
       fontSize: 20,
       textAlign: 'center',
       margin: 10,
       color: 'red',
   }
});

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

// 注意,这里用引号括起来的'HelloWorld'必须和你init创建的项目名一致

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

点击模拟器,刷新视图,会看到如下截图:
react_native-helloworld.png

添加新评论