React_Native 再学习1——从建立到初识导航
2017-12-04 17:54
621 查看
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.jsAppRegistry.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里面我们要获取需要调用
相关文章推荐
- React_Native 再学习3——导航进阶之TabNavigator
- RN8_React-Native知识点1之-Navigator导航学习
- React_Native 再学习2——导航进阶之StackNavigator
- React_Native 再学习4——导航进阶之DrawerNavigator
- ReactNative导航设计与实现
- react-native调起第三方高德地图导航URL解释
- ReactNative学习问题笔记1:android工程中需要引用jar包中的aidl类时不能编译的问题
- React-native学习总结
- React Native学习指南
- 整理了一份React-Native学习指南
- 学习React-Native(一):学习React,使用模块加载器webpack
- 【React-Native】学习指南
- react native组件学习之listview
- 推荐5个值得学习React Native的开源项目
- Reactive-Native学习:iOS工程内嵌React-Native打包(三)
- React Native TabNavigator导航
- RN学习系列---Windows下安装搭建React-Native环境
- React Native 学习笔记八(文本输入的处理)
- 小菜鸟的第一篇文章,在学习RN,就当是做笔记吧,iOS开发RN中添加第三方库react-native-image-picker
- ROS 学习系列 -- RViz 实时观测机器人建立导航2D封闭空间地图过程 (SLAM)