ReactNative For Android 之二：基本组件和API

最新推荐文章于 2019-11-07 11:12:54 发布
最新推荐文章于 2019-11-07 11:12:54 发布
阅读量266 收藏
点赞数
分类专栏： 知识积累 ReactNative android相关 文章标签： android reactnative 基本组件 基本api
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15827013/article/details/98082853
版权

ReactNative For Android 之二：基本组件和API

系列文章：
ReactNative For Android 之一：环境搭建
ReactNative For Android 之二：基本组件和API
ReactNative For Android 之三：工程结构
ReactNative For Android 之四：自定义组件
ReactNative For Android 之五：自定义module
ReactNative For Android 之六：组件生命周期

一.基本组件

1.DrawerLayoutAndroid

在这里插入图片描述

  • drawerPosition:可以用DrawerLayoutAndroid的静态属性positions里的Left或Right指定

  • renderNavigationView:drawer的view

  • onDrawerClose/Open:关闭与打开drawer时的回调方法

  • keyboardDismissMode:键盘隐藏方式(on-drag是在拖动时隐藏键盘)

  • drawerWidth:drawer的宽度

  • < DrawerLayoutAndroid> 之间放置的是主页面的view < /DrawerLayoutAndroid>

2.Image

在这里插入图片描述

  • resizeMode:缩放模式(cover:缩放至占满整个image即可 contain:缩放至包含即可 stretch:拉伸)

  • source:图片来源,两中途径

    1. source={{uri:’’}}:uri路径

    2. source={require(’…/xxx’)}:本地资源的相对路径

  • gif/base64图片也可直接加载

  • ios中还可以有默认占为图，图片加载过程的回调等，android的debug版本暂不支持

3.ListView

在这里插入图片描述

  • dataSource:数据,listview需要是个数组,创建时,需要用ListView.DataSource来包装数据集合,如:

    var dataSource = new ListView.DataSource({ rowHasChanged:(row1,row2) => row1!==row2, }).cloneWithRows(data);

  • renderRow:绘制item的方法,会传入数组元素进去

  • onEndReached:到达底部时执行的回调,可用来实现加载功能

  • onEndReachedThreshold:设置距离底部多少距离时当成到达底部,触发onEndReached

  • renderFooter/Header/Separate：绘制底部头部和分割线

也可实现ExpandableListView

  • dataSource:比较麻烦,需要三个数据集合:

  1. sectionIDs:sectionID的数组 如：[‘s1’,‘s2’]

  2. rowIDs:rowID的数组,每个元素也是一个数组，对应的都是相应section的所有rowID 如:[[‘r1’],[‘r1’,‘r2’]]

  3. dataBlob:总得数据对象,有sectionID:对应的值,还有(sectionID和对应的每个rowID以某种格式拼起来的key):对应的值 如:{‘s1’:‘s1v’ , ‘s2’:‘s2v’ , ‘s1-r1’:‘s1r1v’ , ‘s2-r1’:‘s2r1v’ , ‘s2-r2’:‘s2r2v’}

  • renderSectionHeader:绘制每个section头部的方法,会传入sectionDate

  • renderRow:会传入dataBlob,rowID和sectionID,通过当初构建数据的方式用两个id再取出来相应的值进行设置即可

4.Navigator

在这里插入图片描述
navigator作为一个导航器,可以用来跳转界面,相当于一个栈来管理所有的界面,每个界面是一个route对象,这个对象由自己定义,要有一个属性来唯一区分即可,一般可以设置一个组件,一个数据等等

  • initialRoute：初始界面

  • renderScene:绘制每个界面时的方法,会传入需要绘制的route(可以取出想要的东西来进行处理)和当前的navigator对象(可以接着往下传)

5.ProgressBarAndroid

在这里插入图片描述

  • indeterminate:只是滚动没用完成度那样的进度条

  • styleAttr：样式(大的小的横向的)

  • progress:进度值0~1

6.PullToRefreshAndroid

在这里插入图片描述
下拉刷新控件(android自带的刷新控件),<>放入view即可</>

  • refreshing:刷新状态,决定圆圈是否显示

  • onRefresh:刷新方法

  • colors:进度圈的颜色变化

  • progressBackgroundColor:进度圈的背景

  • enable:是否能用刷新功能

7.ScrollView

在这里插入图片描述
ios还支持刷新功能，android暂不支持

在<></>内放入子view即可,但切记只能放入一个子view(和android一样)

8.TextInput

在这里插入图片描述

  • placeholder相关:hint想关

  • underlineColorAndroid:底下线的颜色

  • keyboardType:键盘类型

  • onSubmitEditing：点击完成后的回调

还有获取焦点,默认值，多行，最大长度，对齐方式，书写位置等属性

9.ToolbarAndroid

在这里插入图片描述

  • actions:指定的action对象数组,每个对象可以包含title,icon,show等属性

  • navIcon:左侧的导航按钮

  • title:标题

  • onAction/IconSelected：action和导航按钮的点击回调

10.ViewPagerAndroid

在这里插入图片描述

  • initialPage:初始页索引

  • onPageScroll:翻页过程中的回调e.nativeEvent:{position,offset}

  • onPageSelected:切换的回调e.nativeEvent.position

<></>内部写view的数组即可

这里需要注意,一个同一组件的数组需要为每个组件传个唯一值的key属性来区分,否则报warning

数组中对每个组件要指定key属性来确保渲染顺序,不能有数字型,否则会被按照大小排序,字符串即可

11.Touchable

在这里插入图片描述
有各种回调,能设置按下的颜色和透明度

  • TouchableHighlight只能有一个child,按下时相当于添加了额外的view来变化颜色

  • TouchableNativeFeedback可以调用native的drawable绘制,下一阶段研究

  • TouchableOpacity简单的改变透明度,不用添加额外的view

  • TouchableWithoutFeedback一般不要用,点击后所有的元素都会有虚拟的响应,造成像web app一样的感觉

12.Text

在这里插入图片描述
当嵌套在一起时,内部的text会继承外面的样式,并且可以有自己的样式,且紧跟在外面text的后面显示,这样就相当于android的spinnerText了

  • onPress：点击事件

13.View

最基本的容器组件,可以指定整个view的布局方向等属性,也有最基本的style样式

二.API

1.AppRegistry

  • AppRegistry是JS运行所有React Native应用的入口。

  • AppRegistry应当在require序列中尽可能早的被require到，以确保JS运行环境在其它模块之前被准备好。

  • 应用的根组件应当通过AppRegistry.registerComponent方法注册自己，然后原生系统才可以加载应用的代码包并且在启动完成之后通过调用AppRegistry.runApplication来真正运行应用。

  • 要“结束”一个应用并销毁视图的话，调用AppRegistry.unmountApplicationComponentAtRootTag方法，参数为在runApplication中使用的标签名。

  • AppRegistry.getAppKeys();为一个数组,包含了注册的组件的tag名

2.StyleSheet

StyleSheet提供了一种类似CSS样式表的抽象。

  1. 从代码质量角度：

    • 从render函数中移除具体的样式内容，可以使代码更清晰易懂。

    • 给样式命名也是对render函数中的原始组件的作用的一种标记。

  2. 从性能角度：

    • 创建一个样式表，就可以使得我们后续更容易通过ID来引用样式，而不是都创建一个新的对象。

    • 它还使得样式只会在JavaScript和原生之间传递一次，随后的过程都可以只传递一个ID（这个优化还未实现。

3.BackAndroid

在这里插入图片描述
在MainActivity的里注册了点击back按钮时的事件会交由js处理,所以js里可以捕获到,当处理完后返回true则结束处理,false则继续交由native系统处理

4.ToastAndroid

ToastAndroid.show(msg,ToastAndroid.SHORT/LONG);

是个自定义的module(后面会讲)方法,会调用android的Toast来输出信息

5.NetWork

在这里插入图片描述
fetch为最基本的异步网络请求,可以传入URL并构建method,headers,body等参数格式

第一个then拿到response,将其转换成json(.json)或者文本(.text())

第二个then拿到最终的数据去处理

done为结束请求

还可以用catch来捕获异常

注意

往往异步任务回来后处理state时，当前页面可能已经关掉，这是再去处理就会报warning,这时可以用this.isMounted()来判断是否还存在界面,相当于android的isFinishing().

此外还有WebSocket全双工请求方式和XMLHttpRequest兼容性高的请求方式。

依生依世
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native封装Android原生UI组件最详教程
...
04-17 8355
欢迎大家关注【跨平台开发那些事】公众号，定期推送跨平台开发技术实践。 篇幅预计阅读时间10分钟，结尾有福利~~ 前些天群里有朋友说想了解如何在React Native项目中使用封装原生View组件，之前有写过一篇Android原生层与React Native 交互的文章，感兴趣的朋友可以看一下。今天要分享的如何封装原生View组件在React Native项目中...
React Native 组件之DrawerLayoutAndroid(抽屉)
Cyibing的专栏
05-04 796
/** * Created by YiBing on 2017/5/4. */ import React, {Component} from 'react'; import { StyleSheet, Text, View, TouchableOpacity, ToastAndroid, DrawerLayoutAndroid, Tex
react native DrawerLayoutAndroid 使用详解
老孟Flutter
05-04 1395
DrawerLayoutAndroid 仅限于android平台。 属性： drawerLockMode: 抽屉锁定模式。 unlocked：默认，抽屉可以通过手势打开和关闭 locked-closed：抽屉关闭并且不可以通过手势打开 locked-open：抽屉打开并且不可以通过手势关闭 drawerPosition：抽屉的位置 Dra
完全征服React Native
08-22
React Native是Facebook于2015年推出的跨平台开发工具，可用于开发Android和iOS App，并且同时具有混合开发的优点（热更新，跨平台）以及本地App的性能。本课程采用新的ES6开发，主要内容包括ReactNative的基础知识，ReactNative的布局，组件，API，封装本地API和组件，发布ReactNative App，本地与ReactNative深度结合
React Native的android API -ReactAndroid开源项目
牛八少爷的专栏
08-26 667
ReactAndroid是React Native的android开源项目； React Native源码：https://github.com/facebook/react-native/tree/master/ReactAndroid React Native的Android API 不同版本的React Native Android API和React Native Android源码...
react-native调用Android原生组件
u012106080的博客
05-22 1153
#react-native和原生交互(Android) 1：在Android项目src包下面创建提供给react(以下简称rc)调用的类 package com.view; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com...
react-native-android-fragment:使用XML将本机Android片段公开给React-Native
05-16
`react-native-android-fragment`库的工作原理是通过React Native的Java模块API来桥接React Native和Android原生世界。开发者可以创建一个XML布局文件，其中包含需要使用的Fragment，并在React Native组件中通过调用...
ojaynico-kotlin-react-native：用于React Native组件和API的Kotlin包装器
02-04
`ojaynico-kotlin-react-native` 是一个开源项目，旨在为React Native提供Kotlin语言的支持，让Android和iOS开发者可以更便捷地利用Kotlin来编写React Native组件和调用其API。这个项目的核心目标是将JavaScript和...
react-native-select：react native的简单下拉列表-iOS和Android
02-05
它已经在Android和IOS上进行了测试，并且非常吸引人。安装npm i react-native-selectme --save用法在您的Javascript文件中要求它。 还支持使用对象解构的组件。 Select Option OptionList 。 <OptionList>
react-native-android:翻译： React Native 新增Android部分章节(http
05-08
React Native 是一个开源框架，由Facebook开发，它允许开发者使用JavaScript和React库来构建原生的iOS和Android应用程序。在本篇文章中，我们将专注于React Native在Android平台上的应用，特别是那些新增的部分章节...
react-native-maps：适用于iOS + Android的React Native Mapview组件
02-05
React本机图 React适用于iOS + Android的Native Map组件 :warning_selector: 维护者通缉 我们需要更多愿意帮助的人或公司。 如果您有足够的时间和知识，并且想要成为维护者，请告诉我们。安装请参阅。 请参阅。兼容...
关于React-native里Android原生模块和组件的写法
black_dreamer的专栏
07-13 3793
原生模块就是把Android里的API导出来给JS调用,说简单一点,就是让自己写的Java函数能够在React Native的js代码里调用。比如一些实现高性能的、多线程的代码，还有譬如图片处理、数据库、或者各种高级扩展等等。 举个栗子： Toast模块： 1、继承ReactContextBaseJavaModule类，实现安卓里面的Toast功能(就是调用Toast.makeText(*))
React-native or Native 获取及绑定设备唯一标识并存储到keychain
shiios的博客
05-22 7853
苹果官方对于iOS设备唯一标识的官方文档链接： https://developer.apple.com/reference/uikit/uidevice/1620059-identifierforvendor近日因为公司app有“一账号一设备”的需求，外包已完成此功能，个人也研究了一下，但发现和外包获取的不一样。所以想在此说明一下，以便大家参考。设备唯一标识简介： IDFV： 全拼：ident
React Native 解决RenderRow只渲染一次
七月、代码君
09-25 1583
数据源判断， rowHasChanged的时候数据源可变 let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => (r1, r2) => { return r1 !== r2; } });状态机声明一个数组保存每次。请求下来的数据，利用c
MySQL报Data too long for column '......' at row 1解决方法
热门推荐
github_38616039的博客
06-11 3万+
修改my.ini文件：将sql-mode='STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION'注释掉,或者将STRICT_TRANS_TABLES,(连',')删掉,然后从起MySQL服务,切记,否则相当于没改....
ReactNative开发之DrawerLayoutAndroid组件的使用
大前端程序猿
10-31 3711
今天记录的是ReactNative开发中DrawerLayoutAndroid组件的使用方法，DrawerLayoutAndroid即侧滑菜单，如下图所示： 当手指从屏幕左侧向右滑动时，即出现上图所示的侧滑菜单 如果要使用Android原生代码来实现这个侧滑菜单，估计要不少代码量吧，但是如果用ReactNative来实现该侧滑菜单，只需要很少的代码即可完成，下面就一步步实现这个侧滑菜单。实现
React Native0.61进阶之组件和API
嘻哈包袱铺 专栏
11-07 450
React Native 提供了一些内置的组件。 基础组件 交互控件 列表视图 iOS 独有组件 Android 独有组件 其他 需要说明的是，你不会被局限在这些内置组件上。React Native 是大开源社区的作品，所以你还可以在 github 或是 npm 上搜索到带有react native关键字的大量的第三方组件。 基础组件 大多数应用都会用到这里的基础组件。如果你是新手...
JavaScript的ReactNative：Android开发新趋势
然后可以创建一个新的test.js文件，开始探索基本的React Native组件和API。 React Native for Android是一个强大的工具，它让开发者能够利用JavaScript的便捷性和React的组件化思想，开发出高性能的Android应用，极...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值