React Native 实战系列一

最新推荐文章于 2024-05-08 22:55:18 发布
最新推荐文章于 2024-05-08 22:55:18 发布
阅读量328 收藏
点赞数
分类专栏： RN 文章标签： RN
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32917103/article/details/70039500
版权

RN实战项目之--GoShopping

一.框架搭建

1.项目搭建 react-native init GoShopping

2.启动服务器：react-native start

3.编译客户端：react-native run-android

4.本项目仿照美团，分为首页，商家，我的，更多四个模块，所以分别新建

Home.js,Shop.js,Mine.js,More.js

使用 react-native-tab-navigator作为导航器，监听tab变化加载不同view，进而完成页面切换

1.资源文件报错：

“FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeDebugResources'.
> Error: Some file crunching failed, see logs for details

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 3.381 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
这里报的问题可能是图片资源文件有问题需要排除

2.在使用react-native-tab-navigator时候

React.Children.only expected to receive a single React element child.
onlyChild
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:3952:93
render
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:55270:48
<unknown>
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20478:27
measureLifeCyclePerf
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19852:14
_renderValidatedComponentWithoutOwnerOrContext
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20477:45
_renderValidatedComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20498:78
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20066:55
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
mountChildren
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19436:56
initializeChildren
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:18895:41
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:18955:28
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
mountChildren
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19436:56
initializeChildren
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:18895:41
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:18955:28
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
mountChildren
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19436:56
initializeChildren
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:18895:41
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:18955:28
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
mountChildren
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19436:56
initializeChildren
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:18895:41
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:18955:28
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
performInitialMount
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:20079:48
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:19983:40
mountComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16251:49
mountComponentIntoNode
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:21222:46
perform
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16537:24
batchedMountComponentIntoNode
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:21229:22
perform
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16537:24
batchedUpdates
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16062:33
batchedUpdates
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:16131:41
renderComponent
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:21274:32
render
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:7102:42
renderApplication
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:46383:21
run
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:46171:33
runApplication
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:46211:26
__callFunction
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:4673:47
<unknown>
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:4544:29
guard
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:4508:7
callFunctionReturnFlushedQueue
    index.android.bundle?platform=android&dev=true&hot=false&minify=false:4543:12
这个问题是由于，react-native-tab-navigator在使用的时候TabNavigator.Item节点间需要有view填充，如下
<TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
3.效果图如下：


4.错误截图：






qq_32917103
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native初级入门到项目实战
10-13
ReactNative是由Facebook公司发布的可以进行混合开发的开源技术框架。通过ReactNative可以为iOS和Android两个系统开发应用程序，“Learn once，write anywhere”。使用ReactNative开发，既拥有Native的良好人机交互体验，又保留了React框架的开发效率，集Native应用和Web应用优点于一身。
React Native实战
fmk1023的博客
03-24 891
文章目录React Native实战一、项目准备1.1 创建原始项目1.2 使用 react-navigation 搭建页面路由1.2.1 安装react-navigation相关依赖1.2.2 修改App文件1.2.3 项目启动报错1.3 修改桌面app的名称和图标1.3.1 安卓修改app_name1.3.2 安卓修改图标1.3.3 ios修改app_name1.3.4 ios修改图标二、项目开发2.1 登录页面2.1.1 填写手机号码2.1.1.1 背景图片实现2.1.1.2 透明状态栏2.1.1.3
React Native项目实战
weixin_50983325的博客
08-30 3669
调试接口 API 调试工具是用来对 API 接口进行调试的。比较出名的有 Postman，Insomnia、Postwoman 等。本节以 Insomnia 为例。 首先，需要跳转到 Insomnia 官网，下载（Insomnia Core）：https://insomnia.rest/download然后执行安装。 然后，配置开发环境。 配置完之后，就可以根据接口（例如：和风天气接口）的使用规则，在 Insomnia 中调试接口了。使用效果如下： 调用接口 React Native 提供了和 web
React Native跨平台开发实战：从零到一
最新发布
天涯学馆
05-08 788
为了在应用中实现页面间的跳转，我们可以使用react-navigation库。使用Redux或MobX进行状态管理。，并编写相应的组件。
【笔记】React Native实战练习(仿网易云游戏网页移动端)
JackyCheung
02-02 745
准备工作：直接在前面两篇笔记的项目基础上，然后随便找了个网易云游戏网页（在Google浏览器上打开调试模式，选择手机模式，网易云游戏网页正好有适配移动端）。在组件里直接拿不到navigation，当前做法是用React props组件传数据，将Home.tsx里的navigation向组件往下传。# 那如果组件里的组件，嵌套N层呢，这个需要如何处理呢？首先先看下四个模块目标原效果，当前项目本打算依赖Ant Design Mobile，看看不借助其他UI框架能碰到哪些问题。
React Native开发iOS实战录
一段曲折的旅程，一个艰难的人生
02-10 2362
总结React native开发iOS应用的基础知识
东方耀手把手教React Native实战开发
02-15
第1课1、手把手教React Native实战之环境搭建_视频_Windows环境 第1课1、手把手教React Native实战之环境搭建【Mac真机】同时调试开发Android&IOS; 第2课2、手把手教React Native实战之从React到RN 第3课3、手把手教...
react native实战视频教程.txt
09-25
react native实战视频教程，手把手教你学习react-native
React Native电商项目实战
11-27
React Native电商项目实战React Native电商项目实战React Native电商项目实战React Native电商项目实战React Native电商项目实战
RN红屏报错采坑 无法加载 index.android.bundle
weixin_34087307的博客
04-04 1347
Unable to load script from assets index.android.bundle... Unable to load script from assets ‘index.android.bundle’ 这是个啥问题 这个错误是想说在加载script的资源的时候失败了，没有发现对应的packager server 造成这种问题的原因挺多的，一部分是这个server真...
分享 50 个完整的 React Native 项目
热门推荐
大灰狼的小绵羊哥哥的博客
04-17 1万+
分享 50 个完整的 React Native 项目 原创 2017-04-17 勤劳的 http://mp.weixin.qq.com/s?__biz=MzA3NjgyNzk2Mw==&mid=2247483797&idx=1&sn=79a4ce677d61543e1033714548c50aa4&chksm=9f5a1dc1a82d94d7de27dca190685d4207dca
React Native 实战：构建电商 App
GitChat
04-12 5552
课程介绍 React Native 充分利用了 Facebook 的现有轮子，是一个很优秀的集成作品，使用 RN 即可做到无需编译就能远程热更新 App，再加上友好的开发方式、快到爆炸的开发效率、RN 已经完爆了其他的 App 开发方式，即使是一个初入前端的开发者也能迅速开发一套 iOS、Android 双平台的 App。 文章中将分三个部分讲解 RN 的开发。通过开发一个比较完整的电商 App ...
React Native混合APP项目实战教程 全栈项目开发教程
k565456的博客
06-22 435
课程目录&lt;贯穿全栈React Native开发App 宠物项目实战&gt;├coding.zip├&lt;第01章 课程预热&gt;│  ├1-1.mp4│  ├1-2 为何选择 React Native.mp4│  └1-3 RN 适合你么.mp4├&lt;第02章 初始 React Native&gt;│  ├2-1 本地环境搭建.mp4│  ├2-2 忍不住尝尝鲜.mp4│  └2-3...
手把手教你React Native实战从 React到Rn《二》
这个时代，作为程序员可能要学习小程序
06-01 2284
React简介 Rn是基于React的设计，了解 React有助于我们开发RN应用，React希望将功能分解华，让开发变得像搭积木一样，快速而且具有可维护性。 React主要有如下的3个特点： * 作为UI（just the UI） * 虚拟DOM（Virtural DOM） 这是亮点 是React最重要的一个特性，放进内存 最小更新的试图 差异部分话更新 different算法 ...
《React-Native系列》React-Native实战系列博客汇总
等待就是浪费青春
11-07 7009
从2016年7月份开始，坚持写ReactNative系列博客，记录工作中遇到的点滴。今天把博客汇如下：《React-Native系列》1、初探React-Native《React-Native系列》2、RN与native交互与数据传递《React-Native系列》3、RN与native交互之Callback、Promise《React-Native系列》4、表单界面代码编写《React-Nati
React native项目的实战1
m0_66406030的博客
05-10 424
这两天写的以一个页面是要求用户点击选项选择自己是否有亲属或曾经在此公司工作过，如果是的话就弹出新的form来选择，新的信息包含一个add按钮，可以添加新的form，右上方有一个“x”按钮可以点击对应的form删除 下面是我在项目中遇到的一些困难 因为是添加一样的View，所以我选择用useState存一个空的数组，然后往里面添加的时候可以arr.map然后render我需要添加的内容，并且传入item,index 方便之后删除操作 添加后发现在input中输入文字会影响其他的input，因为每个渲染.
React Native 实例
huaweizhang的博客
02-01 1322
React Native 在移动端的开发已经相当成熟了，基本上能满足简单的App的需求。 由于可以跟web共享同一套数据流的处理逻辑，所以可以实现前端（iOS，Android，Web）大部分代码的共享。 如果对RN的表现还心存疑虑的话，可以参考一下这个React Native的安卓应用（应用宝搜索“且慢”），看一看RN在图形，响应，交互动画，等UI层的表现力。
Packt.React.and.React.Native.4th.Edition
06-27
"React and React Native 4th Edition - Build cross-platform JavaScript applications with native power for the web, desktop, and mobile" React 和 React Native 第四版是JavaScript开发者们全面且实用的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值