三、iOS开发环境
1、iOS开发环境: (默认读者已经安装Xcode7.0或以上版本,没有可自行前往AppStore下载)
使用npm(node包管理工具)安装react-native-cli(此处应注意权限问题,如果遇到权限问题,请在下面的命令前加上sudo)
npm install -g react-native-cli
初始化工程(下面的语句中千万不要加sudo,后果自负)
react-native init ReactNativeProject(工程名)
在初始化的过程中,如果进度缓慢,推荐你将npm仓库源换成国内镜像:(翻墙用户请忽略) 在终端输入:
npm config set registry https://www.easck.com//npm.taobao.org/dist
2、使用Xcode运行调试程序
查找ReactNativeProject文件目录
按住快捷键Command+Shift+G,在弹出的“前往文件夹”对话框中输入路径/Users/yangshebing/ReactNativeProject(yangshebing表示电脑用户名,请自行更改),点击前往。在文件目中的ios文件夹下找到“ReactNativeProject.xcodeproj”工程文件。如图所示:

运行ReactNativeProject工程
使用Xcode打开“ReactNativeProject.xcodeproj”工程文件,按住快捷键"Command+R"运行此项目,运行成功后便可在模拟器上看到效果。
编辑index.ios.js文件修改界面
笔者编辑index.ios.js文件工具是Vim,每当编辑完index.ios.js文件并保存之后,在模拟器(Simulator)中,按Command+R可刷新界面查看改变后的效果。
下面我们也试着稍微修改一下index.ios.js文件:
/**
* Sample React Native App
* https://www.easck.com//添加文本展示
<Text style={styles.welcome}>
美女
</Text>
//添加图片展示
<Image
source=
//这里需要指定图片的大小
style={styles.picture} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
//这里可以设置文本的字体,对齐方式等
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
//新增图片style,设置图片大小
picture: {
width: 80,
height: 150,
},
});
AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
刷新后运行效果如下图所示:










