React_Native 再学习1——从建立到初识导航

React_Native 再学习1——从建立到初识导航

重新开一个android项目，一点点弄懂react-native各个api的作用：

项目建立：

（环境搭建就不再赘述了）

1、   建立react-native项目：

通过react-native init 项目名

2、   cd到项目中，通过npm install为项目安装npm

3、   新建的项目没有local.properties文件，所以需要从别的项目拷贝过来，告知android能用的sdk和ndk的位置

最终的项目目录：

新建项目中的知识点

index.js  和index.android.js 区别

在react-native V0.49的时候就已经统一了入口为index.js

AppRegistry.registerComponent

这里在index.js中遇到的第一段代码；

应用的跟组件应用使用AppRegistry.registerComponent进行注册自己。然后原生系统就可以进行加载运行bundle文件包，最后就会可以调用AppRegistry.runApplication进行运行起来应用。

registerComponent(appKey:string, getComponentFunc:ComponentProvider) static静态方法，进行注册组件

这里的appKey安卓打包的包名是两个东西，这里的appKey是为了和开启的对应的npm服务做匹配。

若要修改需要和android的MainActivity相对应：

App是我们默认的首先调用的方法或者类，我们可以指定默认的程序入口。这里我改了下：

 

Platform.select

Platform不仅可以选择平台，也可以选择Android的Api版本：

if(Platform.Version === 21){

  console.log('Runningon Lollipop!');

}

开始建立新的页面

 

创建样式：StyleSheet.create

通过StyleSheet.create我们集中地将style的样式进行创建：

 

Const定义：

这里定义style用的是const。说道const我们需要对比一下const和let的区别。

Let：let与var一样用来声明变量，但是它有着更好的作用域规则。它可以被称为更好的var。

它决绝了var的两个bug：

1、因为js没有块级作用域所以会出for循环的bug

eg：

for (var i=0;i<10;i++){

          var a = 'a';

    }

    console.log(a);

这里for循环外部依然能拿到a

2、循环内变量过度共享

for (var i = 0; i < 3; i++) {

      setTimeout(function () {

        console.log(i)

      }, 1000);

 }

最后打印的为3个3。因为for循环之后i为3。

 

Const：

const声明的变量与let声明的变量类似，它们的不同之处在于，const声明的变量只可以在声明时赋值，不可随意修改，否则会导致SyntaxError（语法错误）。一句话总结就是：const 就是用来定义常量的！

 

 

Navigator使用（react-native 0.44时被弃用）:

参考：http://www.jianshu.com/p/44b6f70786e4

和Android不同，RN这里的页面管理是统一通过Navigator来进行配置跳转的。我们在跳转到其他页面的时候，将Navigator作为props一同传入，然后再其他页面就都可以通过Navigator来做页面跳转了。

Navigator比较核心，所以细致写笔记：

Navigator的API：

ConfigureScene：类型是function，可选。通过这个参数可以修改界面在导航时候切换的动画。

(route, routeStack) =>Navigator.SceneConfigs.FloatFromRight

initialRoute：类型是对象，表明最初的Route对象。一个Route简单来说就是一个界面，Navigator用Route来区分不同的界面。

NavigationBar：类型是node，导航栏

RenderScene：类型是function，必须参数，在这个方法里根据Route来渲染不同的Scene。

 

Navigator本身就是一个界面栈的对象，作为栈，它提供了与栈相关的api：

push(route) ：跳转到某一个Route

pop()：推出当前状态

popToTop()：推出到第一个界面

popToRoute(route)：推出到某一个界面

 

因为我的"react-native"的版本为"0.50.4"，在使用Navigator的时候报错，显示他已经过时了~~经过比较，发现react用ReactNavigation进行了取代。

React Navigation（react-native 0.44 版本后推荐使用）

参考；http://blog.lijunbo.com/2017/05/27/guide-intro/

准备：

官网上推荐安装的命令为：

yarn add react-navigation

yarn：它是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

（吐槽：要先安装yarn然后再安装react-navigation，npm这里已经是警告过时语法~）

在正确安装之后：

 

开始使用

注意：

1、突然发现react-native 也是先声明再使用的。

这里App的定义在使用之后会报找不到App的错误。

2、按照例子里面的写法我的项目运行的时候回报错：

type error :undefined is not an object(evaluation 'this.props.navigation.navigate’)

代码入下：

解决参考：https://stackoverflow.com/questions/44678552/react-native-navigation-issue-undefined-is-not-an-object-this-props-navigati

最终代码：

这里获得的知识：

With Expo you should't do the Appregistration your self instead you should let Expo do it, keeping in mind thatyou have to export default component always: Also you need to import View andButton from react-native

 

对于Export的类我们不能再App里面注册它自己，相反的，我们应该让export的代码完成它。

传递参数：

这里传递参数user，代码如上。

这里我比较迷惑的是state和props的传递和获取。

state：是我们传递的参数。在navigation里面我们要获取需要调用