我学React Native开发的经历(一) 第一周学习,环境搭建及demo1,一个导航跳转页面

大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多。 作为新手,文章看的多,但是开始写具体应用的时候,往往一脸迷茫。 所以,我一边学习,一边把学习React_native写过的测试放和看过的资料在这里,供大家参考 .

我整理的要学RN 之前,最好要掌握的基础知识:

  HTML基础知识

  CSS基础知识

  Javascript 基础知识

  Node JS基础

  Android调试基础

1.HTML/CSS/Javascript 这些基础概念,推荐学习网站:http://www.w3school.com.cn/ ,起码要把这个网站上关于这几个分类的教程看一遍

2。学习React 和ES6的基础知识,推荐教程:http://www.ruanyifeng.com/blog/2015/03/react.html

ES6教程http://es6.ruanyifeng.com/#docs/intro

我的环境搭建步骤:

一、学习环境安装步骤

我的环境是Win10+Android调试(真机),使用VS code开发代码

按照这个文档,一步一步来:

1.  http://reactnative.cn/docs/0.47/getting-started.html

下载node.JS的时候:

https://nodejs.org/en/

https://nodejs.org/dist/v6.11.3/node-v6.11.3-x64.msi

Download for Windows (x64)

v6.11.3 LTSRecommended For Most Users

很多同学下高版本,会出现许多问题,对初学者信心打击很大,头疼的很。

再说一遍:.node.js版本问题,不要乱选择,一定要下载官方推荐版 本

2.  按照 原文件所说安装,注意细节步骤

此处注意:真机调试:因为我用的真机(一个杂牌android手机,android 4.0)android的版本低,不能通过usb直接调试,使用内部wifi可调通,

当调试出现红屏幕的时候,按手机菜单键,打开菜单->Dev Settings ->Debug Server host & port for device ->设置你机器的IP:8081端口->注意打开本机调试防火墙8081端口

Node js 要注意打开你本机的安全防火墙规则,添加8081端口出入栈规则,具体操作请参考相关资料。

二、  开发工具,我选择VS code

https://code.visualstudio.com/docs/?dv=win

插件:

•    React Native Tools:微软官方出的ReactNative插件,非常好用

•    Reactjs code snippets:react的代码提示,如componentWillMount方法可以通过cwm直接获得

•    Auto Close Tag:自动闭合标签

•    Auto Rename Tag:自动重命名标签,配合上面的插件使用,基本上能赶上IntelliJ IDEA系的功能了

•    Path Intellisense:文件路径提示补全

Build:在项目目录下react-native run-android(我是用的android调试)

三、  我的学习计划 

做一个小功能,依次一步一步的加功能

我写的demo:

https://github.com/wadereye/Learn_React_Native/tree/master/demo1

四、如何使用

所有的目录download或者 git clone下来以后 ,进入目录:

然后运行 npm install

完成以后运行 react-native run-android或者 react-native run-ios

关于调试:当你更改代码以后,在手机里直接Reload一下就可以了看到更新的内容了。

看了别人的代码,我一般copy到expo里面,看看效果,研究一下别人做这个的思路,把一些属性搞明白 。

五、demo1 关于StackNavigator的用法的测试,用RN写的在页面之间导航并传递参数

本页面是对这篇文章

https://reactnavigation.org/docs/intro/

的演示测试。

六、关于导航条的学习

参见我的demo2

react-navigation包含了一下三类导航器:

StackNavigator:用于提供屏幕(页面)之间的互相跳转。当一个新的屏幕打开的时候,他被显示在最顶部。

TabNavigator :一个切换卡,用于多个屏幕之间的切换。

DrawerNavigator -:提供一个从屏幕左侧划出的抽屉。用于放菜单选项

作者:焚_44b3

链接:http://www.jianshu.com/p/248e36762a08

來源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

建议这篇文章 :

http://www.jianshu.com/nb/15198589

导航条样式:http://www.jianshu.com/p/60728616e4b8

StackNavigator:用于提供屏幕(页面)之间的互相跳转。当一个新的屏幕打开的时候,他被显示在最顶部。

参考这篇文章

http://www.jianshu.com/p/30f645127b04

我写的demo的地址:

https://github.com/wadereye/Learn_React_Native

欢迎交流与讨论

时间: 2024-09-29 23:05:32

我学React Native开发的经历(一) 第一周学习,环境搭建及demo1,一个导航跳转页面的相关文章

react native 开发IOS

转载自kaich blog(http://www.kaich.xyz) 接触 react native 对于技术,我比较喜欢追新.看到报道大名鼎鼎的facebook(开源界的模范,发布了很多高质量的开源框架)开源了移动端跨平台的新框架react native,于是就迫不及待的开始接触它了.react native的目的是为了让前端开发任务能开发移动端(ios程序员相对于web端来说要少得多),于是就有了这样的框架.对于我们IOS程序员有没有必要去学它,看到它另外一个特性:跨平台,而且又一定程度的

【React Native开发】React Native配置运行官方例子-初学者的福音(8)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50546194 本文出自:[江清清的博客] (一)前言 特别说明:本系列专题文章的系统环境是OS X,如果各位童鞋是Windows的话,出现运行安装等坑爹问题,还得重新排查解决哦~俗话说学习一样新东西的时候,例如这边我们要学React Native的组件使用,那么最好的学习资料就是官方提供的材料了,作作为开发人员最好的学习资料就是源码,幸好官方给我们提供了UIExpl

我们一起学React Native(一):环境配置

最近想在项目中实现跨平台,对比一下主流的实现方式,选用了React Native.参考网上的教程,对于一直都是原生移动端开发,对前端的知识不是很了解的,感觉入门不是特别简单.于是打算把学习React Native的过程记录下来. 环境配置 基本参考React Native中文网搭建开发环境教程 搭建开发环境 安装流程就不详细写了,毕竟平台不同,系统原有软件的版本也不同,就算再详细下出来,也很难涉及全,可参考价值不大,况且React Native中文网写得很全面了. 我自己homebrew,Nod

Mac配置React Native开发环境

一直觉得学习一样东西,不动手怎么也学不会,就像学习swift,看了视频没有动手操作,记住的也就那么点,自己写出东西不是这里有问题就是那里出错. 所以,以后学习自己要多动手. 现在我的学习任务就是: 提高自己的iOS代码专业能力,掌握Swift3.0,顺便学习学习React Native. 学习一门语言当然少不了硬件和软件设备啦,不然怎么学习...嘿嘿,对吧!!!! 下面记录下自己配置React Native开发环境: 1> 安装brew: 打开终端,输入:   /usr/bin/ruby -e

React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE

Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮的用户界面和非凡的功能,Sublime Text的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等. 1.下载安装Sublime 3 Sublime 3的下载地址: http://www.sublimetext.com/3 选着相应的平

DECO 一个REACT NAtive 开发IDE工具

DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:http://www.reactnativeexpress.com/    配套学习.

【React Native开发】React Native开发IDE安装及配置

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50476350 本文出自:[江清清的博客] (一)前言 上一讲我们已经对于在OS X系统上面对于React Native For Android的环境搭建以及第一个实例做了详细讲解.所谓工欲善其事,必先利其器,做React Native开发也和其他应用开发一样,最好有一个比较好的IDE工具.那么这边比较推荐以下几款工具:sublime,webstorm以及官网推荐的N

React Native开发入门

目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下React的皮毛,但是对React Native的学习就轻松了好多.所以在学习React Native之前,最好还是先学习一下React.因为我学习的iOS开发,对iOS更加了解,所以里面主要涉及到的平台也是iOS. 二.什么是React Native React Native是一款用来开发真正原生.可渲染iO

React Native开发的通讯录应用

React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero) 0.前言: 项目地址:https://github.com/vczero/React-Native-App 欢迎大家提issues讨论任何问题,包括“试衣间”.... 一.项目介绍 基于React-Native & Node通讯录App (1)主要完成的功能有: 基于文件系统的Node.js服务端; 通讯录功能(分类页 + 列表页 + 拨号邮箱邮件) 公告功能(列表页 + 详情页) 通讯录和内容