2019-09-11 11:36:45 u014621130 阅读数 148
  • 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标签组件的封装。

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

android studio直接运行react-native项目时报错

make sure you're either running a metro server(run 'react-native start')

解决办法:

You haven't started the bundler yet. Run npm start or react-native start in the root directly of your project before react-native run-android。

直接在android 项目根目录下执行:npm start即可。

2019-08-12 16:12:33 qq_29442755 阅读数 33
  • 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标签组件的封装。

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

8081端口没被占。。。

新建好react-native项目后首次运行就报错?。。。

参考了很多方法,比如修改server.js文件里的端口号,npm install 等等等等,都不行。。。

按照https://www.jianshu.com/p/1934710f938f的步骤修改一行代码后解决(开发环境);

修改AppDelegate.m中的方法(文件地址:项目名-ios文件夹-项目名下)

将第一行(绿色部分)代码修改为第二行(jsCodeLocation)

关键步骤是这样?,详细说明见链接。

2019-03-18 23:55:06 u010047432 阅读数 2153
  • 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标签组件的封装。

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

这里先说明一下,由于本博主在创建项目的时候RN的0.59.1刚发布,以RN的一贯尿性必然要会存在不少问题,亲测RN的0.59.1会提示javascript版本与react-native版本不匹配,退回到0.58的最后一个版本0.58.6之后,运行正常。

接下来进入主题,说下遇到问题和解决问题的过程:
在初始化创建项目并通过yarn add react-navigationyarn add react-native-gesture-handler加载导航依赖包时,这两个过程一切正常,但当执行react-native link react-native-gesture-handler进行原生依赖时,喜出望外了+_+!!!:
不废话,直接上解决办法:执行npm install react-native-gesture-handler@latest --save ,然后重新link:react-native link react-native-gesture-handler
error Failed to get dependency config
更新之后:在这里插入图片描述
这应该是yarn对包的管理存在问题导致的…,遇到步骤都按官方要求执行完亦然莫名其妙报错,可以试试不用yarn而用npm来进行包的管理。

2019-07-23 15:14:57 jetable 阅读数 1110
  • 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标签组件的封装。

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

介绍点啥

网上有很多react-native的入门教程,当然坑也很多。一方面是到处拼凑起来的资料,没有实际运行,很可能是有问题的;另一方面,对配置和运行中出现的问题没有详细介绍怎么解决(也可能是人家运气好,没有碰上)。
我是第一次研究移动端应用的开发,完全不懂Android和iOS这一类的技术。react-native略懂思路,所以按照书上和网上的教程做下来,遇到好多问题。这里分享出来,给同样运气差的你一个方向。

下载开发工具和组件

  • Homebrew得会啊,不会的话去看看吧
  • Android studio(非必须,只用sublime就能开发)
  • sublime 3
  • node.js
  • flow(非必须,js强校验工具)
  • watchman(文件变更监控,react-native可以实现热更新)
  • react-native-cli(命令行工具)
  • xcode(基本上在终端启不来iOS版本的话,只能用xcode来编译了)
  • cocoapods(iOS版本开发必须)
  • yarn(Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载)
  1. 安装node和watchman
brew install node
brew install watchman

安装完node后要修改镜像地址,否则安装组件慢如牛,还不一定能装上

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
  1. 安装yarn和react-native-cli
npm install -g yarn react-native-cli

安装完后也要修改镜像地址

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
  1. xcode在app store安装就行
  2. cocoapods比较坑,后面介绍安装

初始化项目

找一个你喜欢的角落,执行

react-native init YouLikedProjectName

完成后就会新建一个名为YouLikedProjectName的文件夹,里面有Android和iOS版本的项目源码以及各种依赖库文件

在这个过程中就有坑了,注意

  1. 一些模块地址被墙,下载不到,就需要proxy了
    shadowsocks开启全局模式,并不代表terminal也可以走代理。另外,terminal只能设置http代理,无法走https;而且,ping命令是无法确认是否走代理了,只能用curl或wget来确认。同样,Android studio也需要手动设置代理,否则无法下载依赖的包。怎么样,坑多么?干的漂亮。
  1. 下载cocoapods慢的要死,几十分钟后还来一个失败
    直接ctrl+c中断,不用等了,执行下面的命令

    $ brew install cocoapods 
    $ cd ios
    $ pod install --repo-update
    

    懂了么,用brew来装cocoapods,然后到项目目录里更新。参考1 参考2

    如果中途遇到SDK “iphoneos” cannot be located这样的错误,参照来指定command路径,然后重新pod install --repo-update就搞定了。

启动项目-Android

  1. 映射端口
adb reverse tcp:8081 tcp:8081

这样就可以把手机和电脑的8081端口映射在一起。

  1. 启动监听服务
react-native start
  1. 运行项目
react-native run-android

如果遇到react-native No bundle URL,参考下面iOS的解决方案。

启动项目-iOS

  • 注意一定先运行react-native start,启动监听服务。然后再运行react-native run-ios
  • 如果命令行启动失败,那就只能开xcode来编译了。注意,必须打开后缀名是xcworkspace的文件,如果只打开xcodeproj,编译可能会报错:Xcode build error linker command failed with exit code 1
  • 如果提示找不到一些头文件,比如:
Error building: 'React/RCTBridgeDelegate.h' file not found; 'React/RCTBridge.h' file not found
Exception: 'React/RCTLog.h' file not found

那么去修改Header Search Paths,增加:
$(SRCROOT)/Pods/Headers/Public
$(SRCROOT)/…/node_modules/react-native/React

注意,要选择递归查找。
在这里插入图片描述

  • 启动成功后,模拟器开启,上传应用后,打开发现react-native No bundle URL present
    在这里插入图片描述
    检查两个地方:
  1. 是否执行过react-native start
  2. 是否开启了代理(需要关闭
    确认两个都没问题,在模拟器中删除应用,然后清理xcode编译后文件:Product——Clean Build Folder,再重新Build,看到如下界面,完美了。
    在这里插入图片描述
2019-04-17 18:33:45 xs20691718 阅读数 296
  • 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标签组件的封装。

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

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

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

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

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

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

想不起来了。。。。。

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

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

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

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