IT全栈 华强工作室

众所周知，Metro是默认的 JavaScript 打包模块。对于前端项目，打包工具已有webpack(大而全，图片代码打包)，rollup(专攻代码打包,框架场景常见)等，既然有这些打包工具为什么还要在移动端搞一个metro，其中一个原因为ram bundle，iOS采用读取一个文件效率更高，Android采用。

用Android Studio打开一个已经创建好的RN项目，选择文件。创建一个类MyNativeModule继承，暴露出一些让RN调用的方法，封装成一个原生模块。实现getName方法，用于返回RN代码需要寻找的类的名称。//RN代码要通过名字来调用该类的方法@Override实现类的构造方法，将传入的上下文赋值给类内部私有的上下文。// 创建一个上下文，放到构造函数中，得到reactContext创建暴露给RN调用的方法，需要用注释符号修饰。//方法不能返回值。

Jenkins初步怀疑是依赖包缺失导致，通过将之前的备份依赖包替换至现有项目中，问题得以解决😂。

NativeEventEmitter、NativeAppEventEmitter和DeviceEventEmitter是React Native中用于处理原生事件的三个不同的事件发射器（event emitter）。

应用RN技术栈实现APP上线后，业务部门领导会上反馈未实现ipad横屏全屏展示，用户体验较差。由此，一场pad横屏全屏展示的APP调优工作由此开展。

前期对此问题已经折腾一阵，并得以修复，没想到今天再次遇到此问题，故记录之。

互联网应用需要能够根据实事情况做出相应调整，例如主题置灰效果。比较简单的实施方案是在样式中添加滤镜效果，例如：把替换成即可。核心代码就是，意思是「把当前元素及其后代元素设置成100%的灰度模式// 现代浏览器.gray {// 远古浏览器.gray {/* 现代浏览器标准 *//* IE */鉴于RN不支持filter设置滤镜属性。故需通过原生层面实现。

在Xcode中能看见所有的公共配置信息都存在于中。主要包含跟文件相关的BuildFileGroup和；跟编译相关的BuildPhase和（List）；以及一些列Target和。开发者比较关键的信息是配置应用PP文件、包名及APP 版本号。

网上给出的解释是由于升级Xcode12.5之后导致的问题，但是通过查看项目jenkins构建记录，发现上一次构建成功的Xcode版本与此次构建失败的Xcode版本一致，均为，故以上说法不成立。

Gradle是一个基于JVM的构建工具，其build脚本使用groovy dsl编写。Gradle的核心在于基于Groovy丰富而可扩展的域描述语言(DSLGroovy通过声明性的语言元素将基于声明的构建推向下层，可以按你想要的方式进行组合。一个project里面可以有多个modulemodule可以是，也可以是library。RN项目中，关于gradle该文件分为项目级和模块级两种，用于描述App工程的编译规则。该文件用于描述java代码的混淆规则。

项目开发过程中，需要获取设备信息，例如获取设备名称。可通过使用开源的第三方组件，该组件适用于iOS和Android双平台。在项目中可通过npm命令下载android需要在配置文件添加权限具体应用示例如下，有关更多获取设备属性方法详参。注⚠️：官方文档指出，在调用方法获取设备名称时，当版本号低于v3时，android需要在配置文件添加权限，若版本号不低于v3，权限可不添加。});总结：作者曾经调用方法获取设备名称，但获取值一直为undefined。

在应用RN开发跨平台APP阶段，从git中拉取项目，应用Jenkins进行组包时，发现最终生成的ipa安装包版本号始终与项目中设置的版本号不一致。

，用于设置系统级的环境变量和启动程序，在这个文件下的配置信息会对所有用户生效。当用户登录（login）时，文件会被执行，并从。这个文件同样也可以用于配置环境变量和启动程序，但只针对单个用户有效。文件中添加环境变量，因为在这个文件中添加的设置会对所有用户起作用。也会在用户登录（login）时生效，也可以用于设置环境变量。，该文件是一个用户级的设置，可以理解为某一个用户的。只有单一用户有效，文件存储位于。（如果只是查看，直接使用。如文件不存在，则新建。目录的配置文件中查找。只会对当前用户生效。

文章目录一、前言二、拓展阅读一、前言居家办公期间，使用自己的电脑开发RN项目，从Git拉取源码后报如下错误：Keystore file '/Users/huaqiangsun/Develop/mrcs/android/app/android.keystore' not found for signing config 'debug'.解决措施：首先查看Mac下jdk安装目录：/usr/libexec/java_home -V执行keystore生成命令：keytool -genkey

文章目录一、前言二、组件语法三、拓展阅读一、前言在Echarts中，为了提升用户体验，当加载大量数据时，需要用到Loading动画效果，具体的组件就是：echartsInstance. showLoading和echartsInstance. hideLoading，且必须成对使用。二、组件语法echartsInstance. showLoading (type?: string, opts?: Object)default: { text: 'loading', color: '#

文章目录一、前言二、样式引入方法三、常见属性及说明3.1 背景3.2 宽高尺寸3.3 外边距相关 (margin)3.4 内边距相关 (padding)3.5 边框相关 (border)3.6 位置相关 (position)3.7 文本相关 (Text)3.8 弹性布局相关 (Flex)3.9 转换相关 (transform)3.10 图片相关3.11 图像变换四、拓展阅读一、前言ReactNative 的样式是 CSS 样式的一个子集，并且属性名称与 CSS 中规定的也不完全相同。二、样式引入方法

前端项目开发过程中，页面跳转必不可少。vue-router，及href方式跳转。本博文主要讲解下页面之间的跳转及传参。

组件分为类组件和函数组件。实现组件需要实现什么效果;组件基本逻辑是怎样的；继承Component或实现render()方法;定义组件属性字段及其类型，以及是否必须，如不必须则默认字段值是什么;绑定点击或者触摸等事件方法，执行前需要判空;注册、调用。

文章目录前言拓展阅读前言在RN中，字体主要包裹在TextInput、Text组件中，顾只需设置以上组件。//设置ios字体大小不随系统的字体大小改变const TextInputRender = TextInput.render;TextInput.render = function (...args) { const originText = TextInputRender.apply(this, args); return React.cloneElement(originText,

文章目录一、安装二、属性介绍2.1 colors2.2 start / end2.3 locations应用拓展阅读一、安装npm i react-native-linear-gradientreact-native link react-native-linear-gradient二、属性介绍2.1 colors默认情况下，渐变色的方向是从上向下的。<LinearGradient colors={['#63B8FF', '#1C86EE', '#0000EE',]} st

移动端应用开发过程中，内容自适应是避不开的一个注意点。相较于PC Web端开发应用设备的数量种类，Mobile APP面临着设备应用多样性问题，各厂商生产设备多样，同一厂商不同型号的电子设备分辨率、屏幕尺寸相异性是不得不考虑的一个问题，尤其是将手持设备，例如iPad等考虑在内，更加剧了设备适配性的思考。在RN实现移动应用开发过程中，通过链接跳转方式跳转至其他技术栈（例如）实现的应用情形中，适配性问题同样值得深思。

React PureComponent的原理当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较：if (this._compositeType === CompositeTypes.PureClass) { shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEq

功能简介属性说明方法集合简单应用示例高阶应用示例拓展阅读功能简介FlatList高性能的简单列表组件，支持下面这些常用的功能：完全跨平台。支持水平布局模式。行组件显示或隐藏时可配置回调事件。支持单独的头部组件。支持单独的尾部组件。支持自定义行间分隔线。支持下拉刷新。支持上拉加载。支持跳转到指定行（ScrollToIndex）。如果需要分组/类/区（section），请使用SectionList。FlatList和SectionList都是以VirtualizedList.

前言ListView常用属性ListView高阶特性ListView使用Demo拓展阅读前言在前期博文中讲解了应用SectionList实现分组列表，本文主要讲解ReactNative长列表数据展示核心组件ListView ，该组件在数据量大时性能较差，占用内存持续增加，故诞生了FlatList组件。ListView常用属性ScrollView 相关属性样式全部继承属性名（类型）说明dataSource 【ListViewDataSource】设置ListView的数据源.

移动端开发过程中，页面间信息传递是常见的应用场景。注册、发送消息方式如下：DeviceEventEmitter.emit('自定义名称',发送数据);消息监听方式如下：DeviceEventEmitter.addListener('名称',(events) ={使用数据events});例如，在A页面注册和发送消息：import {DeviceEventEmitter} from 'react-native';let param = {taobaoBind:false,walletSum:

一、前言二、ABI 是什么三、为何设置ndk的abiFilters四、如何配置 gardle五、ABI支持详解六、支持建议七、拓展阅读一、前言Android 系统本质是一个经过改造的 Linux 系统，so库是Linux系统上使用的共享库（类似windows上的dll）。最初，Android 系统只支持 ARMv5 的 CPU 构架，随着 Android 系统的发展，又加入了 ARMv7 (2010), x86 (2011), MIPS (2012), ARMv8, MIPS64 和 x86_64 .

SectionList简述ReactNative长列表数据组件一共有三个：ListView 核心组件，数据量大时性能较差，占用内存持续增加，故诞生FlatList组件。FlatList 用于替代ListView，支持下拉刷新和上拉加载。SectionList 高性能的分组列表组件。其中，SectionList支持下面的常用功能：完全跨平台；支持水平布局模式；行组件显示或隐藏时可配置回调事件；支持单独的头部组件；支持单独的尾部组件；支持自定义行间分隔线；支持下拉刷新；支持上拉

在前期博文《ReactNative进阶（三十二）：前端构建工具–Yeoman》中将脚手架yo安装成功，本篇博文主要讲解如何利用yo提供的代码自动生成功能生成项目代码。

文章目录前言安装 brew 命令使用 brew 安装软件使用 brew cask 一站式安装brew 的更多用法废弃的用法拓展阅读前言Homebrew 是 mac 下的包管理器，基于命令行模式，使用命令 brew 管理软件。类似 ubuntu 下的 apt-get 、fedora 下的 yum。安装 brew 命令打开mac的终端软件，输入下面的内容，然后回车：/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebre

就帮助我们新建立一个项目，而且项目已经填充了不少代码，我们可以沿着别人的已经搭建好的构架来编写业务即可，这对很多新手来说是非常好的一种提高方式，所以建议大家选star多的 —代码风格好，文件夹规划清晰，脚手架软件用于实现项目中多种不同的工具和接口的协同使用，优化项目的生成过程。的工作流，这个流是由一个强大的,固定的客户端组建，包含工具和框架帮助开发者快速建立强大的。为了降低项目的维护成本，将要求的组件结构和必要的使用说明生成组件模板，使用。工具来直接生成，当项目的体积越来越大时，就会体会到这种方式的好处。

文章目录简介为什么要有 InversifyJS?目标安装应用示例步骤 1: 声明接口和类型步骤 2: 使用 @injectable 和 @inject 装饰器声明依赖步骤 3: 创建和配置容器步骤 4: 解析依赖拓展阅读简介InversifyJS ，一个强大又轻量的控制反转容器，提供给JavaScript 和 Node.js 应用使用，使用TypeScript编写。InversifyJS 是一个轻量的 (4KB) 控制反转容器 (IoC)，可用于编写 TypeScript 和 JavaScript

文章目录前言区别PureComponent缺点PureComponent优势前言React.PureComponent 与 React.Component 几乎完全相同，但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。在PureComponent中，如果包含比较复杂的数据结构，可能会因深层的数据不一致而产生错误的否定判断，导致界面得不到更新。如果定义了 shouldComponentUpdate()，无论组件是否是

文章目录什么是BloC模式？拓展阅读什么是BloC模式？BloC【Business Logic Component】模式是paolo soares 和 cong hui 在2018年Google dartconf上提出的，具体的视频你可以参考YouTube.从视频中可以看到paolo soares用一个及其简单的例子阐述了传统写法的问题：业务逻辑和UI组件糅合在一起。不方便测试，不利于单独的测试业务逻辑部分。不能更好的重用业务逻辑代码，体现在，如果网络请求的逻辑有所变动的话，加

文章目录API原型参数说明RouteConfigstabBarOptions属性拓展阅读API原型createMaterialTopTabNavigator(RouteConfigs,TabNavigatorConfig)参数说明RouteConfigs路由名称到路由配置的一个映射。示例如下：{ Home:{ //这是一个首页路由配置项 screen:Home,//必填项 Home是react的一个组件 path:'',//选填项深度连接或webAPP中起作用 naviga

需求在子组件执行某个操作的时候，需要其去调用父组件中的某个函数或者改变父组件中的某个参数。实现方式如下：子组件export default class Child extends PureComponent { static propTypes = { onItemClick: React.PropTypes.func, } info = '子组件的内容'; itemClick(index) { // 可以将子组件中的某个内容传出给父组件 if (this.

文章目录属性StyleScrollView 必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给 ScrollView 一个确定高度的话，要么直接给它设置高度（不建议，要么确定所有的父容器都有确定的高度。一般来说我们会给 ScrollView 设置 flex: 1， 以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。

文章目录属性及方法介绍Demo属性及方法介绍renderTabBar(Function:ReactComponent)TabBar的样式，系统提供了两种默认的，分别是DefaultTabBar和ScrollableTabBar。注意：每个被包含的子视图需要使用tabLabel属性，表示对应Tab显示的文字。DefaultTabBar：Tab会平分在水平方向的空间。ScrollableTabBar：Tab可以超过屏幕范围，滚动可以显示。tabBarPosition(String，默认

文章目录前言React中bind方法的选择前言在React或React-native的点击事件中，会经常用到bind(this)。比如说一个简单的React-native点击组件：export default class AwesomeProject extends Component { constructor(props){ super(props); this.state = { } } handleClick () { console.log('

文章目录问题描述问题分析解决方法问题描述在RN Android开发过程中，测试机突然报如下错误信息：问题分析红屏给出的解决方案翻译过来如下：请按照以下的步骤来修复此问题：确保包服务器在运行确保你的设备或者模拟器连接着电脑，并且手机打开了USB调试模式，然后在cmd中运行adb devices来查看已经连接好的设备列表确保飞行模式是关闭的如果是使用真机来开发，输入 adb reverse tcp:8081 tcp:8081来检查设备解决方法1、首先检查包服务器是否运行正常。

文章目录前言TouchableWithoutFeedback使用详解TouchableHighlight使用详解TouchableOpacity使用详解TouchableNativeFeedback使用详解前言在做RN App开发过程中离不了用户交互，在React Native中没有专门的按钮组件。为了让视图能够响应用户的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。为什么说是Touchablexxx呢，因为它不只是一个组件，而是一组组件，以下四个组件都可以用来包裹视图来响应