当前位置： 移动技术网 > 移动技术>移动开发>IOS > React Native搭建iOS开发环境

React Native搭建iOS开发环境

2019年07月24日  | 移动技术网移动技术  | 我要评论

一、写在前面

1. 什么是react-native？

react-native是：facebook 在2015年初react.js技术研讨大会上公布的一个开源项目。支持用开源的javascript库react.js来开发ios和android原生app。初期仅支持ios平台，同年9月份，该开源项目同时支持android平台。

react native的原理是：在javascript中用react抽象操作系统原生的ui组件，代替dom元素来渲染，比如以<view>取代<div>，以<image>替代<img>等。

2.react-native有啥优缺点？

优点是：能够用javascript脚本就可以写出app的界面，对从事web开发的同事们转行做几个简单的移动app是个福利。不用为了写个移动app小程序而专门去学习objective-c和swift。

和其他的移动web框架相比：

      native不用webview，彻底摆脱了webview让人不爽的交互和性能问题；

      native的原生控件有更好的体验；

      native有更好的手势识别；

      native有更适合的线程模型；

缺点是：还在试用阶段，潜在的问题尚不得而知：兼容性问题，性能问题等。还没大量普及，学习资料尚且不多，供爱折腾的朋友尝尝鲜。　　

3.要学些什么？

想必，大家已经按耐不住，会发问，使用react-native开发要学习些什么呢？

      html+css+javascript的基本功肯定是少不了；

      node.js的基本概念学习。api文档：

      jsx: javascript语法的一个扩展，类似xml结构。https://facebook.github.io/react/docs/jsx-in-depth.html

      flux: facebook公司的一个创建用户客户端web程序的框架。https://facebook.github.io/flux/docs/overview.html

二、react native基础环境搭建

1、安装homebrew

打开终端输入：

ruby -e "$(curl -fssl https://raw.githubusercontent.com/homebrew/install/master/install)"

2、安装nvm方法

通过脚本安装方式，在终端执行：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash

激活nvm,在安装脚本执行完之后，在终端执行:

. ~/.nvm/nvm.sh

3、默认安装最新版本的node.js并且设置好命令行的环境变量 

nvm install node && nvm alias default node

可以输入node命令启动node.js环境

4、安装watchman

在终端输入：

 brew install watchman

到此处react native基础环境搭建基本完成，推荐经常运行brew update && brew upgrade命令保持你的程序是最新的。

三、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://registry.npm.taobao.org
npm config set disturl https://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://github.com/facebook/react-native
 */
'use strict';
import react, {
 appregistry,
 component,
 stylesheet,
 //添加image全局变量
 image,
 text,
 view
} from 'react-native';

class reactnativeproject extends component {
 render() {
 return (
  <view style={styles.container}>
  //添加文本展示
  <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);

刷新后运行效果如下图所示：

真机运行调试项目

在reactnativeproject工程中找到appdelegate.m文件，将localhost替换成自己电脑的ip地址。

// jscodelocation = [nsurl urlwithstring:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

 jscodelocation = [nsurl urlwithstring:@http://192.168.31.168:8081/index.ios.bundle?platform=ios&dev=true];

替换完成之后再次运行程序，这个时候可以通过摇晃设备唤出开发菜单。

禁用开发菜单

在打包提交市场前，需要禁用开发菜单。禁用开发菜单方法如下： 打开工程，选择product → scheme → edit scheme或使用快捷键“command + <”,在弹出的窗口中选择左边的run菜单项。更改“build configuration” 设置项为“release”。

总结

好了，看到这里，如果你已经成功配置了react-native的环境，并且新建并成功运行了第一个程序了。那么，就先恭喜了，我们甚至没有写一行代码，就已经成功运行了第一个react-native的程序，是不是还挺简单的。正所谓，良好的开端是成功的一半。如果有问题大家可以留言交流。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网