React Native搭建iOS开发环境

 更新时间:2016年09月06日 15:08:57   投稿:daisy  
React Native的门槛不管是对于前端开发者还是移动端开发者来说都是很高的,既要懂原生又要懂js,技术栈是相当长的。但是没有关系,下面我们一步步来学习,慢慢成长吧!

一、写在前面

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文档:https://nodejs.org/dist/v4.2.2/docs/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的程序,是不是还挺简单的。正所谓,良好的开端是成功的一半。如果有问题大家可以留言交流。

相关文章

  • 浅谈iOS解析HTMl标签以及开发中的一些坑

    浅谈iOS解析HTMl标签以及开发中的一些坑

    这篇文章主要介绍了浅谈iOS解析HTMl标签以及开发中的一些坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • iOS如何去掉导航栏(UINavigationBar)下方的横线

    iOS如何去掉导航栏(UINavigationBar)下方的横线

    本篇文章主要介绍了iOS如何去掉导航栏(UINavigationBar)下方的横线,非常具有实用价值,需要的朋友可以参考下
    2017-05-05
  • 如何自定义iOS通讯录

    如何自定义iOS通讯录

    iOS项目中用到对通讯录的联系人或是会员按姓名为关键字进行排序,这篇文章就为大家详细介绍了如何自定义iOS通讯录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • iOS UIBezierPath实现饼状图

    iOS UIBezierPath实现饼状图

    这篇文章主要为大家详细介绍了iOS UIBezierPath实现饼状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • iOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-07-07
  • iOS使用UIKeyInput自定义密码输入框的方法示例

    iOS使用UIKeyInput自定义密码输入框的方法示例

    这篇文章主要给大家介绍了关于iOS如何使用UIKeyInput自定义密码输入框的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • iOS-Mac远程连接控制Window

    iOS-Mac远程连接控制Window

    这篇文章主要为大家详细介绍了iOS-Mac远程连接控制Window,苹果电脑远程连接控制Windows电脑,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • iOS中震动反馈(UIFeedbackGenerator)与系统震动详解

    iOS中震动反馈(UIFeedbackGenerator)与系统震动详解

    最近要做一个项目,需要持续响铃并振动,所以就有了这篇文章,下面这篇文章主要给大家介绍了关于iOS中震动反馈(UIFeedbackGenerator)与系统震动的相关资料,需要的朋友可以参考下
    2018-08-08
  • iOS使用视听媒体框架AVFoundation实现照片拍摄

    iOS使用视听媒体框架AVFoundation实现照片拍摄

    这篇文章主要为大家详细介绍了iOS使用视听媒体框架AVFoundation实现照片拍摄,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • iOS视频添加背景音乐同时保留原音

    iOS视频添加背景音乐同时保留原音

    本文主要介绍了iOS视频添加背景音乐同时保留原音的实现方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03

最新评论