2018-02-02 15:11:15 u013233097 阅读数 483
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

mac 运行 react native run-iOS 报错

用web storm 运行react-native 工程时,出错:xcrun: error: unable to find utility “instruments”, not a developer tool or in PATH

解决办法:
解决方法:在 终端执行如下命令 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

注意:前提是你已经安装了xcode

2017-05-16 17:23:24 u014220518 阅读数 522
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

前言

React Native开发环境可以搭建在Windows平台或者Mac平台下。早期React Native对Mac平台支持的比较好,但是到了0.21.0版本,React Native在win平台也开始满满成熟起来。当然,在win平台上你无法查看iOS运行效果,在此我显示的是在Mac下面搭建React Native环境,并且创建第一个Hello World!项目。

在mac系统环境下搭建React Native环境,首先要通过App Store把操作系统升级到最新的版本,Xcode也要安装和升级到最新的版本。Xcode安装以后要启动一次,同意苹果的开发者协议,再自行补充安装一些Xcode开发组件。

React Native环境搭建

一.安装Homebrew

Homebrew, 简称brew, Mac系统的包管理器, 用于安装NodeJS和一些其他必需的工具软件。
Home-brew 的使用方式:
1)搜索软件:brew search 软件名,如brew search wget
2)安装软件:brew install 软件名,如brew install wget
3)卸载软件:brew remove 软件名,如brew remove wget

Homebrew的安装非常简单,打开终端复制、粘贴以下命令,回车,搞定

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

运行效果:


当你看到Installation successful的时候,说明你已经安装成功。截图如下:


我们可以通过下面的语句来查看是否安装成功,即Homebrew的版本号。

brew -v
运行效果


说明:Homebrew还有很多操作,这里我就不做一一说明了,具体可以参考这位朋友写的一篇博客。Ruby系列文章之2 --- Windows下安装Ruby on Rails 开发环境

二.安装Node.js

安装语句

brew install node
运行截图



三.安装React Native的命令行工具(react-native-cli)

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

安装命令如下

npm install -g react-native-cli
运行效果如下


若出现错误(可能由于权限不足),则实用以下语句进行安装:

sudo npm install -g react-native-cli
补充:(由于国内网络问题,可以将npm仓库替换为国内镜像)
//将npm仓库替换为国内镜像:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

四.推荐安装的工具

1.Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。
终端运行语句安装:

brew install watchman
运行效果


2.Flow

Flow是一个静态的JS类型检查工具,可方便找出代码中可能存在的类型错误。
译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。
终端运行语句安装:

brew install flow

五.React Native开发工具安装

React Native没有带任何代码编辑工具,它的代码可以使用任何一款纯文本处理器进行编辑。React Native官方推荐了三种IDE编写React Native应用:Atom和Nuclide、WebStorm、Sublime Text和VSCode+React Native Tools。我这里推荐Sublime Text编辑器进行代码编辑。

1.Sublime Text3安装

请直接访问Sublime Text3的官网进行安装。Sublime Text3下载地址:http://www.sublimetext.com/3


2.Package Control插件安装

(1)使用 [Ctrl + `] (或View > Show Console menu) 打开Sublime Text控制台,将下面的Python代码粘贴到控制台里:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
This code creates the Installed Packages folder for you (if necessary), and then downloads the Package Control.sublime-package into it. 
  注意:上面的代码会随着版本不同而改变,所以最好取到官网【1】去复制代码。
(2)如果不能自动安装的话,官网【1】也提供了手动(Manual)安装方法,具体做法可以去到官网参考
(3)如果在Perferences->package settings中看到package control这一项,则表明安装成功。

3.用Package Control安装插件

这里我就不详细说了,我是使用了babel-sublime和sublimeLinter插件,大家可以根据自己的习惯进行安装。



六.创建项目

1.初始化项目

命令行创建项目

react-native init ZFJProject

注:ZFJProject为项目名称,大家可以自己的定义。

初始化项目需要很长的一段时间,大家可以出去转一转,远眺一下,放松放松;然后就是项目创建成功了;项目里面iOS文件和安卓文件。


注:如果大家的创建时间太长,可以找到Node.js的安装目录,进入nodejs\node_modules\npm找到文件npmrc,打开后在该文件末尾加上
registry = https://registry.npm.taobao.org 然后保存退出即可。

2.运行工程

我这里直接以iOS为例,可以直接运行ZFJProject.xcodeproj文件,当然也可以直接通过代码运行,代码如下:

//  进入项目根目录
cd ZFJProject

//  运行iOS项目
react-native run-ios
回车以后会有一连串的反应,截图如下:



模拟器效果


3.编辑代码

将index.ios.js拖入你安装的编辑器,我这里使用的是Sublime Text 3


这样你就可以这这里面装逼了。。。编辑完成,重新运行就可以看到新的效果了



2019-01-02 16:33:39 weixin_43744494 阅读数 424
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁
  1. sudo chown -R $USER /usr/local //安装npm淘宝镜像时无权限使用
  2. npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm
  3. cnpm install -g create-react-app //create-react-app 自动创建的项目是基于 Webpack + ES6
  4. create-react-app my-app //创建新React项目
  5. cd my-app
  6. npm start //启动
    在这里插入图片描述
  7. sudo npm install npm -g //全局升级npm
2016-04-19 22:07:51 baidu_16051437 阅读数 5339
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

mac osxreact 开发环境搭建

你必须先安装nodejs

nodejs安装

安装开发辅助工具包

sudo cnpm install babel -g
sudo cnpm install babel-cli -g
sudo cnpm install webpack -g
sudo cnpm install webpack-dev-server -g
sudo cnpm install gulp -g
sudo cnpm install react -g

创建项目文件夹

mkdir myreact
cd myreact

初始化开发环境

npm init

一直回车即可生成 package.json 文件

安装需要使用的工具包

--save 命令用于将包添加至 package.json 文件

sudo cnpm install --save react
sudo cnpm install --save react-dom
sudo cnpm install --save babel
sudo cnpm install --save babel-core
sudo cnpm install --save babel-loader
sudo cnpm install --save babel-preset-react
sudo cnpm install --save babel-preset-es2015
sudo cnpm install --save babel-preset-stage0

建立项目文件

index.html 
component.jsx
main.js
webpack.config.js  //webpack配置文件

编辑package.json

#在    "scripts":{}
#{}内 添加一行
"dev": "webpack-dev-server --hot",

配置webpack

编辑webpack.config.js

 var config = {
     entry: './main.js',

     output: {
         path: './',
         filename: 'app.js',
     },

     devServer: {
         inline: true,
         port: 8080
     },

     module: {
         loaders: [{
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: 'babel',

             query: {
                 presets: ['es2015', 'stage-0', 'react']
             }
         }]
     }

 };
 module.exports = config;

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello react</title>
</head>

<body>
    <div id="app">
    </div>
    <script src="app.js"></script>
</body>

</html>

component.jsx

'use strict';
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            hello holoto !!<br/>
         </div>
      );
   }
}

export default App;

main.js


'use strict';
import React from 'react';
import ReactDOM from 'react-dom';

import App from './component.jsx';

ReactDOM.render(<App />, document.getElementById('app'))

react hello world

命令行下运行dev命令

npm run dev

在浏览器中查看

地址栏输入http://127.0.0.1:8080/
看到

hello holoto !!

就这样 react的hello world 完成了

开始你的react之路吧

2019-08-03 02:35:02 boysky0015 阅读数 484
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

mac下安装react开发工具 — React Devtools

一、下载
官网地址:https://github.com/facebook/react-devtools
下载react-devtools-master文件夹到本地
二、npm安装依赖
进入到react-devtools-master文件夹,用npm安装依赖。

npm --registry https://registry.npm.taobao.org install

三、打包扩展程序
安装依赖成功后,用npm打包一份扩展程序。

npm run build:extension:chrome

四、在Chrome安装扩展程序

  1. chrome浏览器输入chrome://extensions/ ,打开chrome的扩展程序页面。
  2. 安装成功后检查配置:【详细信息】 — 【允许访问文件网址】开启

在这里插入图片描述
在这里插入图片描述
最后在浏览器中打开即可。

Mac下安装React Native

阅读数 7273

没有更多推荐了,返回首页