QSL

1.原生模块

1.1Anroid

有三个NativeModule, JavaScriptModule, createViewManagers

2.IOS

应该有三个，导出模块或者原生View，都是用RCT_EXPORT_MODULE

2.Android原生View的显示bug

Android上，我发现一个View始终不显示，后来发现原因，是原生的View需要重绘，调用自己的requestLayout,再调用measureLayout

这个bug我找了好久，最后没办法试了一下，居然解决了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

private final Runnable mLayoutRunnable = new Runnable() {
    @Override
    public void run() {
      measure(
          MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
          MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
      layout(getLeft(), getTop(), getRight(), getBottom());
    }
  };

  @Override
  public void requestLayout() {
    super.requestLayout();

    // The toolbar relies on a measure + layout pass happening after it calls requestLayout().
    // Without this, certain calls (e.g. setLogo) only take effect after a second invalidation.
    post(mLayoutRunnable);
  }

1. 使用原生自定义View，setState刷新界面后UI不能正常显示
2. github issue

1.Core Foundation

Core Foundation框架 (CoreFoundation.framework) 是一组C语言接口，它们为iOS应用程序提供基本数据管理和服务功能。

CF是由C语言实现的，而不是Objective-C，所以如果用到了CF，就需要手动管理内存，ARC是无能为力的。当然因为CF和Foundation之间的友好关系，它们之间的管理权也是可以移交的，这个后面再说。

Objective-C是ARC管理的对象，而Core Foundation不是ARC管理的对象，所以才要特意这样转换，这与id类型向void*转换是一个概念。也就是说，当这两种类型（有ARC管理，没有ARC管理）在转换时，需要告诉编译器怎样处理对象的所有权。

1.1 CF和OC转换关键字

• __bridge
  被代入对象的所有者需要明确对象生命周期的管理，不要出现异常访问的问题。OC<->CF
• __bridge_retained
  类型被转换时，其对象的所有权也将被变换后变量所持有。 OC->CF
• __bridge_transfer
  把本来拥有对象所有权的变量，在类型转换后，让其释放原先所有权。 CF->OC

__bridge_retained 是编译器替我们做了 retain 操作，而 __bridge_transfer 是替我们做了 release。

Core Foundation框架详解

1.2 Cocoa Foundation

Foundation框架定义的是OC类的基础层,它的根是NSObject类，（和NSObject及NSCopying协议一起）定义了基本的对象属性和行为。除了提供一组有用的基本对象类之外，它还引入了一些OC语言不涵盖的功能的范例。Foundation预期实现以下几个功能：

• 提供少量的基本的实用工具类；
• 为了降低开发的难度，引入了一些统一的约定，比如dealloc函数；
• 支持Unicode字符串、对象持久性和对象分布；
• 提供了一个标准的操作系统独立,提高可移植性。

1. rename git branch locally and remotely

1
2
3

git branch -m old_branch new_branch         # Rename branch locally    
git push origin :old_branch                 # Delete the old branch    
git push --set-upstream origin new_branch   # Push the new branch, set local branch to track the new remote

git hub refference

2. github PR的mergefangs

2.1 Create a merge commit

All commits from this branch will be added to the base branch via a merge commit.
创建一个专门用于合并的commit,保留原始的commit id.

2.2 Squash and merge

The 1 commit from this branch will be added to the base branch.
创建一个commit,包含所有的changes，但是commit id丢失了。

2.3 Rebase and merge

The 1 commit from this branch will be rebased and added to the base branch.
这里的1 commit我不是很理解，其实是整体一组commits。它们的修改时间（Date)没有变化，但是提交时间(commite Date)时间统一变为rebase命令的执行时间。
重新Rebase对象的分支，然后所有的commit id和commit Date变了，changes,commit message，Date没变。

git 做diff时，是按照一个起始点，然后把所有changes显示出来。如果是三方合并，它们是从共同起始点开始，看相同的行有没有修改。所以如果从master到development或者相反的方向，不要使用rebase,也不要使用Squash,因为它们会修改commit的id，导致merge的时候出现冲突。

默认commit的时候，Date和commit Date是一样的，但是rebase之后commit Date的时间变成了rebase执行时的时间。

怎么选项merge方式：

• feature、fix分支到development，三种方式都可以选择，优先选择Rebase,保持commit一条直线。
• development、release、master分支由于要相互间持续的merge，所以它们之间的merge方法选择第一种，Create a merge commit。这种方式会保留commit id.那么merge的时候冲突就少了。

3. rebase操作

3.1 同一个分支

git pull –rebase,如果有冲突，解决冲突后git rebase –continue.

3.2 不同分支

git rebase target,把head rebase到target的Head上，然后本地修改会以它为起点，产生diff。之后执行git rebase –continue.
然后远程分支直接强制push。git push -f

1.Image

react-native-web中把Image转为了div,使用了bacground-image:url(‘xxxx’),还有background-size:’contain’ or ‘cover’

2.mobile safari remote debug

这个时候是无痕模式，没有WebSQL写入权限，可以用cookie。

3. zIndex导致的穿透

错误设置了zIndex，导致一个Tag显示在Modal层之上。一开始我怀疑是Modal层的问题，比如overflow或者position,backgroundColor，验证不是之后。因为Dom树，React的渲染树没有问题。后来才发现Tag多了一个zIndex:5，不知道谁加的，显然这个是不必要的。所以去除后，bug修复。zIndex可以穿透position: fixed的Modal层，所以和mobile app不一样，mobile app上Modal层是独立原生的，靠zIndex穿透不了。

4. 微信浏览器缓存

nginx的缓存设置成{expires -1},意思是永不缓存。

5. div下的View

比如我用的react-moda,在其children中设置flex:1,chrome没有问题，iOS 11也么有问题，ios就有问题。原因是设置flex:1的元素其父容器没有设置width和height。解决方案就是不用flex,用固定width和height。但是我不明白的就是

1
2
3
4
5

//View 没有任何style。children都设置了width和height
<View>{children}</View> 
//**********
{children} //children都设置了width和height
//有什么区别?

有的时候，没有显示内容，解决方案有下面:

• 设置固定width,height
• 在<View>上，加上一个div，设置它的style，display:flex

6. search param 传一个数组

如果serch param是空数组或者是undefined，传到新页面是undefined,所以需要做w未定义检查。

空数组传不过去，只能做未定义检查。

1
2

// lodash map 总会返回一个数组，无论参数是否为空
const a = map(undefined, v => v) // a = []

1.RN的通讯原理

1.Mac OS自带python

MAC OS会自带python, 通常我们不需要使用和修改它，我们自己安装python,同时保留系统python。设置方法就是$PATH中/usr/local/bin/优先级高于/usr/bin/,优先使用local用户的pyton。

系统python路径
/System/Library/Frameworks/Python.framework/Versions/2.7/bin

注意：系统自带的python没有pip，我们也不需要安装pip到系统自带的python中。

1.gc overhead limit exceeded

react-native run-andorid 总是提示device not found, 但是adb devices 能发现模拟器。而且同时有gc overhead limit exceeded错误，并提醒gradle内存分配不够。我更新了genymotion，错误一样。后来按照提示在~/.gradle/gradle.properties中增加了

1

org.gradle.jvmargs=-Xmx2048M

这样gradle就不报错了，执行react-native run-android成功安装到模拟器。
其实一开始按照提示来做，就不会有问题，只是我认为之前一直没有改gradle配置，也可以运行，并且./gradlew assembleRelease打包也没问题，只有debug有问题，所以认为是模拟器问题。最终还是gradle的问题，下次先按提示来改，这个提示还是正确的，并不是误报。

1. XCode的工程相关名词解释

1.1 workspace

这个是放所有文件的地方，里面有多个project

1.2 project

管理一个项目的地方，里面有多个scheme

1.3 scheme

管理一个target,生成一个产品（APP)，勾选Share之后才能共享给他人使用。

1.4 target

一个管理编译设置和文件引用的配置（.plist文件)，继承project的设置，可以根据需要改写

1.5 provisioning profiles

该文件将App ID、开发者证书、设备绑定到一块儿，在开发者中心配置好后可以添加到Xcode上，也可以直接在Xcode上连接开发者中心生成，真机调试时需要在PP文件中添加真机的UDID。

1.6 开发环境 生产环境

默认xcode带有debug和release Configurations(Project->Info),最大区别就是宏Build Settings->Preprocessor Macros DEBUG=1 为DEBUG，即开发环境,否则是生产环境。其它configuration都是duplicate自这两个，还是看这个宏。

1.使用svg

1.1 image

1
2

import backIcon from '../assets/svg/back.svg'    
<img src={backIcon} />

1.2 div background

1
2
3
4
5
6
7

import backIcon from '../assets/svg/back.svg'    
<div style={{
  background: 'url(' + backIcon + ') no-repeat 50% 50%',
  width: width,
  height: height,
  ...style
}} />

1.3 div background-image

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import backIcon from '../assets/svg/back.svg'    
<div style={{
  backgroundImage: 'url(' + source + ')',
  width: width,
  height: height,
  ...style
}} />
//这个是渐变色背景
<div style={{
  backgroundImage: 'linear-gradient(to bottom, #26a9ff 0%, #324dff 100%)',
  width: width,
  height: height,
  ...style
}} />

1.字体居中

我设置了flex, justifyContent: ‘center’,还是没用，后来发现是字体格式的问题，我用的HelveticaNeueLTPro-Cn.otf,这个字体的字下面有空白，所以居中不对，后来用了PingFangSC-Regular就好了，我就不知道为什么下面有空白？
https://stackoverflow.com/questions/27431681/why-is-my-font-face-adding-space-at-the-baseline

2.mobile字体 mobile web字体

mobile字体不一定能用于mobile web字体，不知道为什么。因为我用的一个字体可以用于react-native,但是不能用于mobile web，格式是ttf。

3.远程手机浏览器调试

1.adb forward tcp:9224 localabstract:chrome_devtools_remote
然后localhost:9224

2.chrome://inspect