enoent reactnative
2017-08-12 11:39:00 weixin_34358365 阅读数 137

手动删除 node_modules 里的文件夹出现error: bundling: Error: ENOENT: no such file or directory错误

1058839-dd1cc78ca456d7b9.png
解决方案
2017-03-09 16:38:00 weixin_34331102 阅读数 22

最近找工作,总是被问道,知不知道react Native,我直接回答,没有;这就是动力了

首先是windows下的环境搭建

参考博客:

史上最详细windows版本搭建安装react-native环境配置/

http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/

 

搭建开发环境

http://reactnative.cn/docs/0.42/getting-started.html#%E6%89%8B%E5%8A%A8%E8%BF%90%E8%A1%8Cpackager

上面两篇文章讲的很详细,但是初次搭建的时候,还是有点坑,比如我是小白,就在命令行的时候出错了

1、在搭建号环境后,要配置环境变量,不然会出现各种不是内部命令。如下图所示:

2、命令的问题

最开始敲命令的时候,总是以为,react native 他们两个应该是分开的把。结果,还真是不能有空格;

react-native 

3、运行命令,遇到卡在gradle-2.4.1.zip处不动了

提示无法下载(给一个exception或者error),有的是卡住了。解决办法:

C:\Windows\System32\MyProject\android\gradle\wrapper在这个文件下找到gradle-wrapper.properties,找到

https\://services.gradle.org/distributions/gradle-2.14.1-all.zip 

改成:

http\://services.gradle.org/distributions/gradle-2.14.1-all.zip

也就是去掉s。

 

转载于:https://www.cnblogs.com/shoneworn/p/6526404.html

2018-08-29 21:22:00 weixin_34001430 阅读数 328

其实,关于这两者还是有很大区别的,但是现实中,还是往往会弄错,以为他们两差不多,其实还是挺多的

reactjs

这个是需要webpack之类的东西,然后安装相关的依赖,才能运行在web浏览器中

react-native

这个是用于产生原生应用的框架,

你可以在iOS和Android上像ReactJS那样快速的实现复杂的UI

2018-08-08 11:28:00 weixin_33968104 阅读数 83

01 - 关于React

React.js 通常简称为 React
Facebook 官方对 React 的定义:

React is a JavaScript library for building user interfaces

从上述官方的定义可以知道:React 是一个用于前端UI开发的 JavaScript 库。和其他类似的前端框架相比,例如,Google推出的 Angular,和以轻量级著称的Vue.js,React 最大的不同是提出了 Virtual DOM (即虚拟 DOM) 的设计,可以大大提升页面渲染的效果。

但是,Facebook 不仅仅满足于 React 对前端开发技术的革新,又将 React 的设计移植到原生开发中,从而诞生了 React + Native 结合的产物,即 React Native。

所以,简单来说:

  • React Native 和 React 使用了相同的开发语言 JavaScript 和相同的设计理念 React。
  • React Native 和 React 运行的环境和平台却是完全不同的,React Native 是基于移动平台 (如iOS, Android等),而 React 是基于浏览器。

02 - React Native和React 的区别

  • React Native 是Native 控件,但以React component 的方式export 出来
  • React是针对View层的使用JavaScript的UI组件开发库,从设计初衷来说,React是不关心View层具体技术实现的(比如是否web,android,iOS甚至是windows还是macOS)。
  • ReactNative更多的是一个基于React进行iOS和Android原生App开发的框架,包括封装好的UI组件库,同时提供了React组件生成原生APP的能力。
  • 从实现上看,主要是底层 renders 层不同,React 使用的是 Visual DOM,React Native 替换成了native 组件。
"react": "^16.0.0",
"react-native": "0.55.3",
import React, { Component } from 'react';
import { View, Text, StyleSheet, Modal, Image } from 'react-native';

03 - React Native 的跨平台

1. 原生应用

所谓的原生应用是指:使用原生开发语言,工具和平台开发的应用。原生应用开发的优势在于拥有较高的平台成熟度,包括平台的稳定性,运行时的性能及完善的生态。

缺点是开发成本较高,导致开发效率相对较低。

2. 跨平台应用

为了解决产品满足多个平台的需求,就有了所谓的跨平台应用开发。

以下是几种常见的跨平台解决方案:

  • 混合应用开发:在移动浏览器中嵌入 HTML页面来开发移动应用,
  • 跨平台的语言:例如,基于.NET 和 C# 的应用,以及基于 Ruby 的应用等。
  • React Native:使用的是 Web 语言(JavaScript)和环境(Node.js),类似的技术方案还有Weex等。

04 - 解剖 React Native 应用的结构

React Native 应用的整体结构

React Native 应用

JavaScript 桥接层

JavaScript Code 和 Native code

原生平台 APIs,原生平台 UI 组件, 自定义的原生组件

React Native 应用开发使用的是与 React 相同的开发语言 JavaScript 和设计思想 React,而底层仍然是基于原生平台的。这样后不同平台的适配就交由 React Native平台去处理,而开发者只需要专注于 React Native 平台应用开发本身,体现的优势如下:

  • 应用层的开发变得简单,高效和跨平台
  • 应用稳定性,运行时的性能和原生平台接近
  • 在理解 React Native 原理之后,开发者也根据实际的产品需求开发自己的 React Native 组件,以复用已有原生平台的大量优秀组件
2016-10-14 21:56:00 Zero_HL 阅读数 175

最近在学React Native,了解了一个原本iOS中非常重要的导航控件的使用方法。不过在React Nativa中,这个导航控件是不会自带顶部的导航栏的,也不会自动生成返回按钮之类的,只是提供了类似的导航功能,且原理也是出栈入栈的方式,也就是说同样是有着push和pop方法的。这里不讲React Native的基础了,直接讲一讲Navigator这个组件的基本使用方法。

对于一个导航组件,最基本的就是下面几个点:

  • 进入下一个界面
  • 返回上一个界面
  • 传递数据给下一个界面
  • 返回数据给上一个界面

我们一个一个来看。

首先要使用Navigator组件,按照惯例是要import它的,这个别忘了。一般我们都是在index.ios.js文件中放置整个app的入口界面,这里我们也是要把Navigator这个组件框架放在index.ios.js文件中,代码如下:

export default class RNNavigatorDemo extends Component {
  render() {
    let rootViewName = 'FirstView';
    let rootComponent = FirstView;

    return (
      <Navigator
        initialRoute = {{ name: rootViewName, component: rootComponent }}
        configureScene = {(route) => {
          return Navigator.SceneConfigs.HorizontalSwipeJump ;
        }}
        renderScene = {(route, navigator) => {
          let Component = route.component;
          return <Component {...route.params} navigator = {navigator} />
        }} />
    );
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

可以看到我们return了一个Navigator容器。initialRoute就是我们要放在这个导航容器中的根界面,也是第一个界面,这里我们放的是名为FirstView的界面,这个界面是由另一个js文件描述的,所以也要记得import。我们把它作为component参数的值,至于另一个name参数,真的也就是一个name而已,不太重要。然后紧跟着的configureScene是描述界面之间的过渡动画的,比如从右边滑出来啊或者从底部滑出来之类的,在node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js文件中可以看到所有可以选的方式。接下来的内容直接写就可以了。

到此,我们放置了一个Navigator的导航容器,第一个界面是我们的FirstView界面,至于界面长什么样子,就是在FirstView.js文件中描述了。

react native

阅读数 29

整理中...

博文 来自: dubo_csdn

React - Native

阅读数 14

React Native

阅读数 0

ReactNative

博文 来自: weixin_34355698

React Native

阅读数 10

【React Native】

阅读数 8

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