React Native

一直以为混合编程就是HTML+原生来写前台页面用html，功能用原生，结果做出来的项目一直不满意，主要android太坑了。。内部的webkit只要图片一多，做个轮播效果，我只想说抱歉，卡爆了，特别华为手机上更是不得了，都android 6.0了为啥也这么卡爆，没有更新chrome内核么？还是最原始版本的chrome内核都不升级了，然后看其他app淘宝，微信，为啥就能这么快运行，轮播也不会卡顿，后面才发现他们用的是react native。我一直纠结mui，mui这玩意是好是快速，但是呢对于android呢，各种神级坑，不同厂家手机差异性要不要这么大。算了。。研究react native去了。。后续项目会不断更新 来源： oschina 链接： https://my.oschina.net/u/163029/blog/747187

安装和配置react-native-vector-icons 根目录下使用 npm install react-native-vector-icons --save 安装完成后运行 react-native link react-native-vector-icons 命令link这个库 Android端的配置: 打开android / app/src/main 中并创建了 assets/fonts 的目录 黏贴node_modules/react-native-vector-icons/Fonts的文件 接着我们要在 android/app/build.gradle 文件中添加以下内容： dependencies { ..... compile project(':react-native-vector-icons') .... } 阿里矢量图标库iconfont的使用 选择需要下载的图标,下载svg格式 前往 解压zip文件，可以看到文件夹中有以下文件 其中 demo_unicode.html 包含了所有图标对应的unicode字符，我们就是用它来显示图标。 将iconfont.ttf文件分别copy到Android和iOS工程目录下。 Android放置在 app/src/main/assets/fonts 文件夹中 生成iconfont.json

1、View 树的加载流程 文末有免费福利哦 当我们调用 startActivity() 方法的时候，会调用到 ActivityThread 中的 performLaunchActivity() 获取一个 Activity 实例， 并在 Instrumentation 的 callActivityOnCreate() 方法中调用 Activity 的 onCreate() 完成 DecorView 的创建。这样我们就获取了一个 Activity 的实例，然后我们调用 handleResumeActivity() 来回调 Activity 的 onResume() ： private void handleLaunchActivity(ActivityClientRecord r, Intent customIntent, String reason) { // .... WindowManagerGlobal.initialize(); // 创建 Activity 的实例，在这里完成对 Activity 的 onCreate() 方法的回调 Activity a = performLaunchActivity(r, customIntent); if (a != null) { // ... // 在这里回调 Activity 的 onResume() 方法

方法一： 创建不同的文件扩展名： *.android.js *.io.js 方法二： import { Platform } from 'react-native'; if (Platform.OS === 'android') { // Do something specific for Android } else if (Platform.OS === 'ios') { // Handle iOS } marginTop: Platform.OS === 'ios' 10 : 0, paddingBottom: Platform.OS === 'android' 8 : 0 方法三： const myStyle = Platform.select({ios:{},android:{}) const myFn = Platform.select({ios:()=>{},android:()=>{}) myFn(); 方法四： if (UIManager.setLayoutAnimationEnabledExperimental) { UIManager.setLayoutAnimationEnabledExperimental(true); } 来源： https://my.oschina.net/u/4225199/blog/3135188

译者按： 充分利用其特性，你会觉得 VSCode 非常强大！ 原文: Pro tips for Visual Studio Code to be productive in 2018 👨🏻‍💻 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。 在开源 IDE 市场，最近几年 Visual Studio Code(简称 VSCode)越来越流行。自从 2015 年对外发布后，根据 2018 年 Stack Overflow 的调查报告，有 35%的开发者转而使用 VSCode。我接下来会介绍一些建议和技巧来让你更加高效的使用 VSCode。 Git 和 Gitlens Git 可以说是在开发者中最流行的软件，从 IDE 直接操作 Git 会比通过命令行简单很多。Git 模块可以帮助你做 stage、commit、stash、undo 等操作。 Gitlens 插件提供了更多的可能性。Gitlens 最有用的特性就是你可以看到每一行代码的 commit 历史。 实时共享 VSCode Live Share 是一个实验性的特性。官网上这样说到： 无论构建什么类型的应用，使用何种语言编程或使用何种操作系统，当需要协作时，实时共享都能够立即将你的项目与队友共享。 队友可实时编辑和调试，无需克隆存储库或设置其环境。 通过 Live

引言，有一天我在调试一个界面，xml布局里面包含Scroll View，里面嵌套了recyclerView的时候，界面一进去，就自动滚动到了recyclerView的那部分，百思不得其解，上网查了好多资料，大部分只是提到了解决的办法，但是对于为什么会这样，都没有一个很好的解释，本着对技术的负责的态度，花费了一点时间将前后理顺了下 1.首先在包含ScrollView的xml布局中，我们在一加载进来，ScrollView就自动滚动到获取焦点的子view的位置，那我们就需要看下我们activity的onCreate中执行了什么？ 答：当我们在activity的onCreate方法中调用setContentView(int layRes)的时候，我们会调用LayoutInflater的inflate(XmlPullParser parser, @Nullable ViewGroup root, boolean attachToRoot)方法，这里会找到xml的rootView，然后对rootView进行rInflateChildren(parser, temp, attrs, true)加载xml的rootView下面的子View，如果是，其中会调用addView方法，我们看下addView方法： public void addView(View child, int index,

1.x和2.x版本 yarn add react-navigation # or with npm # npm install --save react-navigation 3.x版本 yarn add react-navigation # or with npm # npm install react-navigation yarn add react-native-gesture-handler react-native-reanimated # or with npm # npm install react-native-gesture-handler react-native-reanimated 1.如果你的 ReactNative版本 是 0.59 及以下，还需要手动通过link命令添加依赖 react-native link react-native-reanimated react-native link react-native-gesture-handler link后IOS的设置就完成了，但在Android端还需要一些配置。 对于react-native-gesture-handler这个库还需要做如下配置： 在项目根目录Android中MainActivity.java文件中，添加如下配置： package com.reactnavigation

高德地图：官方AP误差很大，不稳定。 import com.amap.api.maps.AMapUtils; public void calc(double lat, double lng, double latitude, double longitude, final Promise promise) { try { Number space = AMapUtils.calculateLineDistance( new LatLng(lng, lat), new LatLng(longitude, latitude) ); promise.resolve(space); } catch (Exception e) { promise.reject(e); } } 根据2组经纬度，计算两点之间的距离（JavaScript计算两组坐标之间的距离）： function getDistance(start, end) { var lon1 = (Math.PI / 180) * start.longitude; var lat1 = (Math.PI / 180) * start.latitude; var lon2 = (Math.PI / 180) * end.longitude; var lat2 = (Math.PI / 180) * end.latitude; // 地球半径

在开发过程中，免不了使用原生Java，记录一下。 使用场景： import {NativeModules} from 'react-native'; class Test extends Component { constructor(props) { super(props); } componentDidMount() { NativeModules.ToastModule.show('hello', 1000, (msg) => { console.log(10, msg); }); NativeModules.ArrModule.getArr('hello').then((msg) => { console.log(20, msg); }); } render() { return undefined; } } Java部分，需要创建3个文件：ToastModule.java、ArrModule.java和CustomPackage.java 第一个，调用系统弹窗，Callback回调数据： // ToastModule.java package com.Test;// 改成自己的包名 import android.widget.Toast; import com.facebook.react.bridge.Callback; import com.facebook

2019杭州云栖大会上，高德地图技术团队向与会者分享了包括视觉与机器智能、路线规划、场景化/精细化定位、时空数据应用、亿级流量架构演进等多个出行技术领域的热门话题。现场火爆，听众反响强烈。我们把其中的优秀演讲内容整理成文并陆续发布出来，本文为其中一篇。 阿里巴巴高级无线开发专家宋照春在高德技术专场做了题为 《高德客户端及引擎技术架构演进与思考》 的演讲，主要分享了高德地图客户端技术架构沿着「上漂下沉」、「模块化、Bundle化」的思路演进所做的一系列架构升级中的经验和思考。 以下为宋照春演讲内容的简版实录： 主要分享三个方面的内容： 融合 架构治理 动态化 一、三管齐下 深度融合 高德最初有两个端，车机版的高德导航，手机版的高德地图，两个团队，一个是2B，一个是2C，分别是汽车业务和手机业务。当时在引擎/技术上，分为离线引擎和在线引擎，但两个团队之间交流比较少，各自有自己的研发、产品和测试，而作为一款端上的APP，两块业务都需要有地图渲染、路线规划、导航以及定位等通用能力。从公司层面看，存在较大的重复建设，整体研发效率较低。 于是我们做了一件事：利用技术手段，打通端上引擎，打造一套能同时支撑多端的APP能力。具体到执行层面，先从A团队拉一部分人到B团队一起建设，建设完之后再从B团队拉到A团队。在同时支撑好主线业务发展的情况下，通过一年左右时间，完成了引擎上的融合，做到同时支撑手机