使用React Native开发iOS应用需要OSX系统,然后安装Homebrew,nvm,node,npm以及watchman,你也可以有选择的使用Flow。
如官网实例:
详细教程请移步React Native中文网http://reactnative.cn/docs/0.27/getting-started.html#content
2.安装成功后运行iOS应用
$ cd AwesomeProject
- 用XCode打开
ios/AwesomeProject.xcodeproj
并点击Run按钮。 - 使用你喜欢的文本编辑器打开
index.ios.js
并随便改上几行。 - 在iOS Emulator中按下
⌘-R
就可以刷新APP并看到你的最新修改! - 恭喜!现在你已经成功运行并修改了你的第一个React Native应用!
3.打开新建的工程包
ios和Android的app的开发分别在 index.ios.js或者index.android.js 里。我们以index.ios.js为例,先看下代码结构:
第一部分:引用React(新版本)
import React,{ Component } from 'react';
以前的版本是
import React,{ Component,View } from 'react-native';
第二行:需要用到的控件的引入
import { AppRegistry,StyleSheet,Text,View,Image } from 'react-native';
第三部分:页面布局
class test extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to forIOS React Native! </Text> <Text style={styles.instructions}> To get started,edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } }
第四部分:页面排版的样式设置
const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: { fontSize: 20,textAlign: 'center',margin: 10,color :'red' },instructions: { textAlign: 'center',color: '#333333',marginBottom: 5,});
Android中的项目结构和ios是类似的,只是个别插件名称不一样。所以可以开发ios或者Android,然后把代码负责到其他的平台的js里达到复用。