2016-09-25 13:12:09 zhangbuzhangbu 阅读数 3372
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    462 人正在学习 去看看 钱兴岗

调试React-Native有两种场景,第一种是通过react-native run-ios(或者run-android)启动应用,第二种是打开已经安装在手机的Debug版本。

1)通过react-native run-ios(或者run-android)启动应用后,要调试应用就比较简单,在配置过Js Server的ip和port后,当应用上显示已经成功时,即可通过编辑js源文件,然后保存。再次刷新应用界面即可进行调试

2)如果不想再次通过react-native run-ios(或者run-android)启动调试过程,可以在打开安装好的Debug版本之前,通过Atom的Nuclide工具启动Js Server。然后就可以直接通过修改js文件调试


2019-04-17 18:33:45 xs20691718 阅读数 294
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    462 人正在学习 去看看 钱兴岗

点击在我的博客 xuxusheng.com 中查看,有更好的排版哦~

react-native-debugger 是在 react-native 开发时经常使用的一款调试工具。

默认监听的端口是 8081,与 react-native 默认的端口一直,无需改动。

但是当希望同时运行多个 react-native 项目并进行调试时,就需要监听不同的端口了。

方法一、通过启动参数的方式修改端口

想不起来了。。。。。

方法二、通过快捷键新开窗口(推荐)

打开一个窗口,然后使用 Command + TCtrl + T

然后在新的窗口中,输入相应的端口号就行啦。
在这里插入图片描述

2018-02-03 16:24:37 guduyishuai 阅读数 2241
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    462 人正在学习 去看看 钱兴岗

前面介绍了react native的expo方式开发,非常快捷方便。

react-native 环境搭建(上)

react-native 环境搭建(下)

但是如果我们还需要原生代码,或者开发完毕后,需要真机调试,光是上面的内容是不能实现的。

为了实现以上内容,我们需要依赖sdk,我们可以通过android studio的sdk manager来下载我们想要的sdk。

下面来详细说明一下怎么搭建react native和原生的混合项目

一、react-native

之前我们安装的是create-react-native-app,现在我们要安装另一个东西

npm install -g react-native-cli
       二、SDK依赖

 目前我们项目的react native版本为0.52.2

 依赖的sdk platforms为android 6.0(marshmallow)

 其中需要包含如下

 

   SDK Tools为23.0.1

    

配置好环境变量ANDROID_HOME

三、创建工程

react-native init 项目名

创建成功日志如下


创建完成后,连接设备,用adb查看设备是否连接


如果连接正常,在项目根目录下运行react-native run-android命令

如果出现如下错误

      

      原因可能有很多种,毕竟这个错误信息比较笼统。我这里说一下我遇到的情况。另外先说明一下,这个错误只是

安装apk时出错,apk已经打包好了,我们可以将apk包用adb进行安装


 好了,现在来说一下我遇到的情况。由于我的设备的版本是android5.0,对于android5.x的系统react-native

确实存在这个问题。解决办法为,修改build.gradle和gradle-wrapper.properties文件,将相应的版本进行降级



再次调用react-native run-android命令,就不会有之前的错误了


如果这个时候,启动app报错如下


表明找不到启动所需的入口,解决办法如下

在src\main下建立assets文件夹

调用如下命令

React-native bundle --platform Android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
 
 这个时候,assets文件夹下会多出两个文件


最后,需要检查项目路径下是否有index.android.js文件。我创建的项目中没有该文件。需要拷贝index.js文件,将

文件名改为index.android.js。


2018-11-26 08:47:57 leo_linzhiqiang 阅读数 85
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    462 人正在学习 去看看 钱兴岗

近期项目需要使用react-native,就学习了相关的知识,在此就当记录一下吧。

首先我是用的是react-native@2.0.1,路由相关使用的是react-native-router-flux@4.x。接下来会有详细的介绍。

1.关于react-native开发,第一步就是配置环境;

我是用的是Windows,所以在这边就配置了win下的,使用真机进行调试。

具体配置方法,请参考https://reactnative.cn/docs/getting-started.html,是react-native的中文网,主要谈一下遇到的一些坑:

1)需要打开开发者模式。

2)需要把电脑的防火墙打开(新手常见大坑)。

3)需要与电脑在一个局域网下。

4)需要在手机上将手机上将ip和端口号调到你本地电脑ip,端口号一般默认8010。

ps.在使用react-native init创建项目时,需添加./android/app/src/main/assets/index.android.js,项目才能运行。

2.react-native-router-flux的使用;

具体用法请链接到https://github.com/linzhiqiangleo/react-native,这是一个小的demo,有基于react-native-router-flux的路由传参,还有就是父子组件之间相互传参,兄弟组件之间传参。对于有react经验的同学,都很好上手;

下面主要说说遇到的一些坑:

1)在使用react-native-router-flux反向传参时,代码如下:

 <Text style={styles.welcome}
       onPress={() => {
           Actions.popTo('register');//先回退到注册页面           
               setTimeout(()=> {  
                    Actions.refresh({ backData: '我从找回密码回退到注册页面' }); //再传值刷新页面   
               });    
           }}>
</Text>

未完待续......

2018-12-07 14:18:58 qq_20473985 阅读数 4403
  • React Native 项目开发实战 第1节

    移动端应用高速发展, 本教程便是使用ReactNative开发的高性能基于原生应用跨Android与iOS两大平台的大型综合App。 本实战项目使用react native 开发招聘,房产,点餐,商城,二手车,本地商务的大型综合门户性app项目实战课程,项目基于RN最新版本0.58, react-navigation也是基于最新3.x版。在整个项目中使用到了mobx进行数据和状态管理,封装了很多原生模块例如 地图组件 react-native-mapbox-gl,聊天组件 react-native-gifted-chat等等,同时封装了大大小小30多个自定义组件包括FlatList再次封装, 数字键盘封装,自定义图标组件封装,表单验证组件的封装等。  本课程为项目实战的开篇课程,主要讲解ES6常用语法和概念的理解,包括箭头函数和静态方法的使用等为后续实战做好铺垫, 课程最后完成一个基于实战项目中的Tab标签组件的封装。

    462 人正在学习 去看看 钱兴岗

用了http://localhost:8081/debugger-ui,安装了react-devtools,又发现了一个神器,这个算是集成了react-devtools和浏览器调试。

安装

官网地址:https://github.com/jhen0409/react-native-debugger/releases

运行如下:

使用

如何使用呢? 相当的简单, 参考文档:

https://github.com/jhen0409/react-native-debugger/blob/master/docs/getting-started.md

鉴于是英文文档,有些小伙伴可能也没耐心看,简单介绍一下操作步骤。

1.关闭Chrome浏览器中所有的 http://localhost:/debugger-ui 页面;

2.打开下载好的react-native-debugger应用;

3.在模拟器或者真机上打开开发者菜单, 启用  Debug JS Remotely。

搞定,可以好好的调试了。

还有props值,state值的,用的那个组件。emmmm。。。刚下载用的还不熟,后面再看吧。官网提示可以监控redux,mobx,还没有尝试,尝试之后再来分享吧。

提示:

Enable Hot Reloading和Enable Live Reload一直开启。

热加载Hot Reloading与实时加载Live Reload的区别:

  1. (1)实时加载应用更新时需要刷新当前页面,可以看到明显的全局刷新效果。

  2. (2)而热加载基本上看不出刷新的效果,类似于局部刷新。

 

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