React Native入门-Hello World

基础条件：搭建好开发环境（详情见React Native官网）、模拟器（当前文章使用的是Genymotion模拟器）
实现：
1.通过命令行初始化React Native工程项目（react-native init Hello)

2.使用开发工具WebStorm开发工程项目，其工程目录结构如下所示：

3.项目入口为index.js，其指向为App.js，故对App.js文件进行修改。

react-native为0.6版本的写法

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

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

const App = () => {
  return (
    <Fragment>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <View style={{alignItems: 'center'}}>
          <Text>Hello world</Text>
        </View>
      </SafeAreaView>
    </Fragment>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

react-native之前的写法

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

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello World</Text>
      </View>
    );
  }
}

4.初始化项目后通过命令行cd Hello进入项目，运行react-native run-android或react-native run-ios运行项目

之后会启动一个node服务器

5.运行成功后，app界面出现Hello World

备注：初次编写，若有不好之处，还请多多包含，谢谢。