### 创建App
* * * * *
#### 创建步骤:
~~~
react-native init MyApp
cd MyApp
react-native run-ios
~~~
#### 运行方式:
命令行运行` react-native run-ios`
Xcode打开 MyApp→ios→MyApp.xcodeproj这个文件,点击左上角的运行按钮。

**注意**:init命令默认会创建最新的版本,而目前最新的0.45及以上版本需要下载boost库编译。此库体积庞大,在国内即便翻墙也很难下载成功,导致很多人无法正常运行iOS项目,中文网在论坛中提供了这些库的国内下载链接。如果你嫌麻烦,又没有对新版本的需求,那么可以暂时创建0.44.3的版本。
~~~
react-native init MyApp --version 0.44.3
~~~
提示:如果run-ios无法正常运行,请使用Xcode运行来查看具体错误(run-ios的报错没有任何具体信息)。
一个新创建的APP的目录结构:

App.js就是这个项目的入口文件(之前的版本会有两个文件index.android.js和index.ios.js,现在2.0.1创建就是只有一个App.js文件了)
~~~
//通过Platform.select来判断不同的环境
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
~~~
~~~
// App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
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,
},
});
~~~
~~~
// index.js 入口文件
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('demo', () => App);
// 注册App组件成为整个demo应用的根容器
~~~
