移动开发
文章平均质量分 89
__卓原
程序员~
展开
-
Flutter key
Flutter Key当widget在widget tree中移动时,key可以保留它的状态.key可用于保留用户的滚动位置,或在修改集合时保持状态.什么时候需要Key如果你还没有用过key,说明你可能还不需要使用key.事实也正是如此,大多数时候,我们不需要使用key.但是如果你发现自己需要添加,删除或重新排序处于某种状态的相同类型的widget的集合的时候,可能就是需要用到key的时候了.我们先用一个官方的例子来看一下key的作用 , 交换两个只有颜色不同的widgetclass Ke原创 2020-06-22 17:41:24 · 1487 阅读 · 0 评论 -
Android LifeCycle监控生命周期
LifeCycle的作用是感知组件(Activity/Fragment)的生命周期 , 并在合适的生命周期执行分配的任务.1.监听组件生命后期假设我们此时有一个Util类,其中有两个方法需要分别在Activity的onStart和onDestory的时候执行,我们可以先让它实现LifecycleObserver:class LifecycleUtil : LifecycleObserver ...原创 2019-12-27 15:35:09 · 3856 阅读 · 1 评论 -
Java 反射
JAVA反射机制JAVA反射机制是在运行状态中,对于任意一个实体类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性;这种动态获取信息以及动态调用对象方法的功能称为java语言的反射机制。Java的反射机制允许编程人员在对类未知的情况下,获取类相关信息的方式变得更加多样灵活,调用类中相应方法,是Java增加其灵活性与动态性的一种机制功能1、获得某个对象的属...原创 2019-11-15 16:23:29 · 1851 阅读 · 0 评论 -
颜色透明度 16进制对应表
一、颜色透明度和十六进制对应的表格:透明度16进制100%099%398%597%796%0A95%0D94%0F93%1292%1491%1790%1A89%1C88%1E87%2186%2485%2684%2983%2B82%2...原创 2019-01-17 16:30:09 · 12014 阅读 · 0 评论 -
ReactNative面试题
1 . 打印出a的值是?if(true){let a = 1} alert(a)答: a is not defined let不存在变量提升,且作用域只在代码块 这样看你可能有点不太清楚,我们来格式化代码if (true) { let a = 1}alert(a)这样是不是一目了然了?! 博主第一看的的时候没有仔细看,匆匆就写了个1 ,尴尬. 扩展1.va...原创 2018-04-17 16:41:19 · 3511 阅读 · 0 评论 -
Promise 的then 与 async await 写法相互转化
本来一直是用then来对promise进行处理的 , 今天在用react-native-stroge的时候发现作者很推崇async await的写法 于是研究了一下,把自己的代码替换了. 下面进入正题在使用的时候,我存值时是这么写的: // 存值 createData(title, successBack, errorBack) { // 使用key保...原创 2018-05-04 16:52:10 · 22509 阅读 · 2 评论 -
ReactNative 吸顶
感谢同事提供的店铺UI图和思路。 图录的不太好,但意思差不多表明了。其实如果结构不复杂的话,可以使用SectionList实现,但我这用的是ScrollTabView,ScrollTabView里面还有列表组件,嵌套在SectionList中很麻烦。。。对 我试过了。。。最开始我的思路是: 滚动组件包括ScrollView,ListView,FlatList,Se...原创 2018-06-16 19:58:25 · 5415 阅读 · 16 评论 -
ReactNative 启动白屏解决方案 react-native-splash-screen
安装1.添加 yarn add react-native-splash-screen 2.自动link react-native link 或者 react-native link react-native-splash-screen修改原生代码Android:通过以下更改更新MainActivity.java以使用react-native-spl...原创 2018-06-29 15:36:31 · 1578 阅读 · 0 评论 -
ReactNative 自定义标题栏 ReactNative 自定义导航栏
先上代码,配合代码讲解一下使用方法, 我这有用到一个屏幕适配工具类,自己写的,使用方法和代码 请点这里/** * Created by 卓原 on 2018/6/16. * */import React from 'react';import { Text, StyleSheet, View, TouchableOpacity, Image...原创 2018-06-18 00:24:30 · 6507 阅读 · 0 评论 -
react-native-firebase 通知
通知简介React Native Firebase的通知模块支持远程(FCM)和本地通知。远程通知Firebase云消息传递(FCM)允许您的应用程序远程显示通知。为了使事情变得简单易懂,我们将React Native Firebase功能明确划分为仅限数据和通知消息。远程通知:用于在设备上显示可见通知。包含可选的数据有效负载(键/值对的映射),供应用程序使用(如果它位于前台),或者随后打开通知。...原创 2018-07-02 16:38:20 · 3422 阅读 · 0 评论 -
react-native-firebase 登录功能集成与实现
以下内容基于 react-native-firebase 版本4.1 安装iOS安装首先确保您已遵循。初始设置指南 Add the pod将以下内容添加到您的Podfile:pod 'Firebase/Auth'run pod update。如果您打算使用电子邮件登录链接,那么您还需要遵循。iOS动态链接安装指南Android安装添加依赖项...原创 2018-07-02 17:37:56 · 4712 阅读 · 0 评论 -
React Native Firebase
React Native Firebase 介绍RNFirebase使用Firebase和React Native简单。它是一个轻量级的图层,位于iOS和Android的原生Firebase库的顶部,尽可能地反映Firebase Web SDK。虽然Firebase Web SDK库可以与React Native一起使用,但它主要是为Web构建的。RNFirebase为iOS和Andro...原创 2018-07-03 10:00:25 · 2071 阅读 · 0 评论 -
react-native-i18n 语言切换工具
yarn add react-native-i18nAndroid在./android/settings.gradle文件中添加下列代码:include ':app', ':react-native-i18n'project(':react-native-i18n').projectDir = new File(rootProject.projectDir, '../node_m...原创 2018-06-29 00:08:06 · 3612 阅读 · 0 评论 -
ReactNative 原生UI组件 桥接原生 Android
React Native已经封装了大部分最常见的组件,譬如ScrollView和TextInput,但不可能封装全部组件。而且,说不定你曾经为自己以前的App还封装过一些组件,React Native肯定没法包含它们。幸运的是,在React Naitve应用程序中封装和植入已有的组件非常简单。原生视图需要被一个ViewManager的派生类(或者更常见的,SimpleViewManager的派...原创 2018-04-02 16:10:00 · 2492 阅读 · 1 评论 -
ReactNavigation 重置路由栈的两种方法 以及SwitchNavigator不处理回退操作
我们在项目中尝尝有这样的需求 , 给app添加一个广告业/启动页/引导页等等, 之后进入app的主页面 , 前面的 广告业/启动页/引导页 不提供入口,并且按返回键也不会回到那个页面. 一般我们会跳转到主页之后重置路由,今天提供两种方法来实现.首先是跳转之后重置路由://首先导入NavigationActionsimport {NavigationActions} from 'react...原创 2018-03-02 14:28:48 · 13358 阅读 · 2 评论 -
react-native 轮播组件 looped-carousel使用介绍
一 关于轮播类组件,网上其实已经有挺多了,本人曾经用过 swiper,viewpager,以及facebook出品的viewpagerAndroid。swiper因在安卓上有问题,而且在组件嵌套使用时问题较多,所以弃用。后来尝试viewpager,因为轮播时,下面的圆点显示有误,所以弃用。而ViewpagerAndroid因为只支持安卓系统,所以很少用到,在ios必须另找组件。最近原创 2017-07-31 14:58:42 · 8303 阅读 · 7 评论 -
react-native播放视频组件 react-native-video的用法
react-native-video 是一个播放视频的开源组件,它的用法很简单。1.安装依次执行下面两个命令,npm i -S react-native-videoreact-native link (这一步是连接本地视频库)(1) ios:如果您想允许其他应用在您的视频组件上播放音乐,请添加:AppDelegate原创 2017-06-10 16:55:18 · 27308 阅读 · 7 评论 -
react-native SectionList的使用
之前facebook发布了高性能的列表组件 Flatlist(可理解为优化后的Listview),后来又增加了一个SectionList。属于增强版的Flatlist,支持头部悬浮等,如果你的列表不需要分组(section),那么可以使用结构更简单的<FlatList>。关于FlatList的使用,可参考:react-native flatlist 的进阶使用而且二者之间有...原创 2017-08-03 16:25:11 · 4401 阅读 · 1 评论 -
react-native flatlist 的进阶使用 (头尾,间隔组件和滚动事件)
0.43之后 RN添加了Flatlist组件,作为ListView的增强版,FlatList有着很强的性能上的优势,而且使用起来也更简单。最基础的:<FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => Text>{item.key}Text>}/>最好是给data数据每一个item都添加一个ke原创 2017-07-04 22:26:22 · 30177 阅读 · 5 评论 -
react navigation的学习与使用
在很久之前,RN中文网说推荐用react-navigation替代navigator作为新的导航库,从RN 0.43版本开始,官方就已经停止维护Navigator了,所以强烈建议大家迁移到新的react-navigation库,而且新的导航库无论从性能还是易用性上都要大大好于老的Navigator!附上英文文档地址,这个是我自己写的导航例子:https://github.com/lizhuoyua...原创 2017-06-04 00:03:33 · 10928 阅读 · 2 评论 -
Mobx在ReactNative中的使用
MobX简单、可扩展的状态管理 Github 仓库: https://github.com/SangKa/mobx-docs-cn入门MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:任何源自应用状态的东西都原创 2017-11-30 16:41:47 · 1323 阅读 · 0 评论 -
ReactNative 刘海屏适配iPhoneX
iPhoneX 出了之后 , 它的小刘海和底部的home条成为了移动端程序员需要适配的地方, 今天用ReactNative 初步在项目上尝试了适配. 先看一下iPhonex7和X上同样代码的效果图:UI适配导航栏适配iPhoneX由于多了大圆角、传感器(齐刘海)以及底部访问主屏幕的指示遮挡,所以需要注意原有这部分内容的设计。 iOS11前导航栏的高度是64,其中statusBa...原创 2017-11-21 14:51:08 · 20483 阅读 · 6 评论 -
ReactNative 图片上传保存 CameraRoll的使用
本文主要介绍CaremaRoll的使用(保存图片,获取手机图片) 图片上传(常用于上传头像功能)CaremaRoll介绍结合官方文档做说明:CameraRoll模块提供了访问本地相册的功能。在iOS上使用这个模块之前,你需要先链接RCTCameraRoll库,具体做法请参考链接原生库文档。译注:本模块只提供了基本的访问图片的功能,并没有提供相册界面。对于多数开发者来说,可能原创 2018-01-16 15:43:08 · 5693 阅读 · 1 评论 -
Android 多渠道配置打包
设置app的build.gredleproductFlavors在android节点下添加如下代码://配置多版本的apk productFlavors { oneplus { applicationId "com.android.application.oneplus" manifestPlaceholder原创 2018-02-05 17:00:05 · 1436 阅读 · 0 评论 -
ReactNative 抽屉组件 侧滑栏 react-native-side-menu
示例图:安装npm install react-native-side-menu --save使用引入组件import SideMenu from 'react-native-side-menu';使用组件:render() { const menu = Text style={{marginTop: 22}}>aaaText原创 2018-02-06 14:50:12 · 7452 阅读 · 1 评论 -
reactnative热更新 react-native-pushy
快速入门-准备工作首先你应该有一个基于React Native开发的应用,我们把具有package.json的目录叫做你的”应用根目录”。如果你还没有初始化应用,请参阅开始使用React Native。所以我们也假设你已经拥有了开发React Native应用的一切环境,包括Node.js、npm、XCode、Android SDK等等。如果你之前没安装过,你还必须安装Androi...原创 2018-02-08 17:09:03 · 4073 阅读 · 1 评论 -
ReactNative 封装fetch网络请求
封装的fetch方法类/** * Created by 卓原 on 2017/11/14. * zhuoyuan93@gmail.com *//** * 请求头 * @type {{Accept: string, Content-Type: string}} */const header = { 'Accept': 'application/json', ...原创 2018-03-01 17:36:20 · 880 阅读 · 0 评论 -
react-native调用Android原生模块
今天学习了一下在react-native中调用原生安卓模块的使用,发现很多网上的文章都是直接照抄的文档,这样会有一些坑,导致最后无法运行或者成功调用,所以写下这个博客来分享,同时也记录一下学习过程,方便以后查看。学习理由:有时候App需要访问平台API,但React Native可能还没有相应的模块包装;或者你需要复用一些Java代码,而不是用Javascript重新实现一遍;又或者你需要原创 2017-06-12 23:23:09 · 3357 阅读 · 5 评论