React Native学习笔记（二）---运行开源App，形成直观感受

2024-06-07 04:08:29

React Native学习笔记（二）—运行开源App，形成直观感受

Taylor Guo @ 2017年09月10日

看了几个教学视频，直接训练使用的React Native官方文档中的指南英文版和中文版。

我觉得这样挺仔细的，但我没那么多时间，希望能更快一点。直接使用了react-native-ganke项目来修改、练手和学习。

项目安装

先下载项目文件，然后按照以下步骤进行操作。

项目启动

启动后，可能会遇到以下问题：

额，问题来了！

打开调试工具

先看是什么问题，cmd + D

打开Chrome调试工具

先看重点问题：程序没有注册，初始化时require()出错或者无法调用组件注册。

先去 index.ios.js，发现 GankIO名字没有问题。

再看react-native和react版本，react-native版本是app要求的版本，react版本不是。
删除ios/build的build目录，重新npm安装react版本，build app。
仍然出错，无果。

继续查找错误中。。。 2017年09月10日-23:25.

苦闷

折腾了一整天，直到9月11号凌晨2点半GanIO的这些问题都没有很好的解决，不知道问题出现在哪里，甚至不知道如何去排查问题！非常苦闷。

于是，换了好几个开源App，基本都是有问题的。

不知道是不是React Native还在不停地改进的问题，还是安装过程中各种版本问题。

关键问题，对零基础新手来说，还是非常挑战的。

面对这诸多困难，我选择了逃避！鄙视我吧！

等我绕回来再来了解这些难题吧！

柳暗花明

所以不能继续耽误下去了。

找了最新的开源APP，React Conf 2017 Companion App，这个是React Conf 2017 APP，React Native开发。

Clone代码后，用Yarn安装。

安装Yarn：

brew update
brew install yarn

安装完成后，在Xcode中打开ios目录下面的ReactConf2017.xcodeproj，build and run。

终于看见这一缕曙光！

发布到真机，看看效果

真机调试

1. 可以去苹果官网￥688购买一年的开发者账号

2. 可以用Apple ID

真机结果

1. Debug发布到真机，卡爆了！

2. Release 发布到真机，还可以！

交互还不错，还比较流畅！

那就愉快地决定用这款英文编辑软件了！

2017年9月12日-11：50

React Native学习笔记（二）---运行开源App，形成直观感受相关推荐

React Native学习笔记一之搭建开发环境
因为项目需要,今天开始正式学习React Native,先来搭建个开发环境忐忑的心情因为项目比较急,而且客户要求使用React Native开发,只能先学点基础然后在项目中使用的时候,边做边学了, ...
react native学习笔记29——动画篇 Animated高级动画
1.前言上一节我们学习了全局的布局动画api--LayoutAnimation,体验到其流畅柔和的动画效果,但有时我们需要实现一些更精细化的动画,或者完成一些组合动画,这时我们可以使用React N ...
react native 学习笔记
编译第一坑 Error type 3. Activity class {com.awesome_project/ com.awesome_project.MainActivity} does not ...
react native学习笔记13——FlatList上拉加载
我们可以利用官方组件RefreshControl实现下拉刷新功能,但React Native官方没有提供相应的上拉加载的组件,因此在RN中实现上拉加载比下拉刷新要复杂一点. 虽然没有直接提供上拉加载的 ...
React Native学习笔记-1：JSC profiler is not supported.(转载）
运行react-native中Example下的UIEXPLORER Project 遇到虾面报错: 2016-03-21 14:12:18.941 [trace][tid:com.facebook. ...
React Native 学习笔记六（关于宽高的设置）
继续在之前的例子上进行添加尺寸 1.使用固定的尺寸设置View容器和设置自定义的组组件如果父组件的空间不足自控件的会出现重叠的情况示例: import {AppRegistry,S ...
React Native 学习资源精选仓库
<React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...
React Native 学习资源精选仓库(汇聚知识，分享精华)
React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...
React系统学习笔记
***当前阶段的笔记 *** 「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v 点击链接保存,或者复制本段内容,打开「阿里云盘」 ...
AI Studio 飞桨零基础入门深度学习笔记4-飞桨开源深度学习平台介绍
AI Studio 飞桨零基础入门深度学习笔记4-飞桨开源深度学习平台介绍深度学习框架深度学习框架优势深度学习框架设计思路飞桨开源深度学习平台飞桨开源深度学习平台全景框架和全流程工具模 ...

最新文章

热门文章