react-native知识点记录

一、 数据+状态方案记录

1. 页面发起actions

2. store中掉接口

3. 接口通过api封装，非交互数据请求到后做model处理（仅部分数据做了）

4. model后的数据通过reducer存入state

5. 通过connect将state按需注入页面

形成闭环，首屏数据统一存入state，api和action结合，页面注入和触发，形成前端小范围mvc结构

二、罗列知识点

基本知识

1. react的jsx写法

2. es6,7用法

3. react-native提供的api

四大支柱

1. axios封装和配置

2. redux生态链

3. react-navigation各项配置

4. 公共方法的归类和注入

板块设计

1. 板块规则

2. 组件树设计

插件和原生

1. 熟悉react-native社区

2. 看懂插件文档

3. 原生的基本知识

三、 热更新和热部署

RN最吸引人的特性就是可以在ios和安卓上实现热部署，避过app store的审查

原理

1. 本地代码集成codepush的sdk

2. 将更新后的内容发布到codepush

3. 本地代码每次打开时会比对codepush服务器上的版本和本地版本是否一致，不一致会触发更新

4. 实现实时更新

具体配置地址

https://www.jianshu.com/p/6a5e00d22723

一些命令

1. 查看当前登录用户
   code-push whoami

2. 创建应用
   // code-push app add 应用名 版本 平台
   code-push app add test-android android react-native

3. 查看当前已创建 app 应用列表
   code-push app list

4. 重命名app：code-push app rename <appName> <newAppName>

5. 移除app：code-push app rm <appName>

6. 查看app的部署：code-push deployment ls <appName> [--displayKeys|-k]

7. 查看app的某个部署的发布更新的历史记录：code-push deployment history <appName> <deploymentName> [--displayAuthor|-a]

8. 发布更新：code-push release-react 《应用名》 ios -t "1.0.0" --des "测试热更新" -d Staging

9. debug：code-push debug <platform>

10. 查看已应用对应的 key 值 code-push deployment ls 《应用名》 -k

11. 清空app的更新 code-push deployment clear <appName> Production or Staging

四、 react-navigation

RN最常用的路由组件

简介

react-navigation分为三个部分。

1. StackNavigator类似顶部导航条，用来跳转页面和传递参数。

2. TabNavigator类似底部标签栏，用来区分模块。

3. DrawerNavigator抽屉，类似从App左侧滑出一个页面。

const TabNav = createBottomTabNavigator(tabNavRouteConfig, tabOptionConfig);

const AppNavigator = createStackNavigator(stackRouteConfig,stakeOptionConfig);

const AppContainer = createAppContainer(AppNavigator);

<AppContainer onNavigationStateChange={this.onNavigationStateChange} />

• routeConfig为路由路径配置参数

• optionConfig为导航定制相关参数

• AppContainer将导航封装为组件

• appContainer中的页面就可以使用this.props.navigation.navigate(routeName,params)跳转

五、 三方处理

需要link

1. react-native-device-info

注意 该库使用的是androidx，和当前大部分android support不兼容

2. react-native-gesture-handler

3. react-native-i18n

4. react-native-image-crop-picker

5. react-native-picker

6. react-native-signature-capture

7. react-native-splash-screen

8. react-native-webview

9. rn-fetch-blob

六、 当androidx和support冲突时

1. 通过./gradlew :app : dependencies查看哪个依赖使用了androidx

2. 回退该依赖为支持support的版本

七、 集成自定义iconfont

1. 安装react-native-vector-icons插件

2. 书写icon组件，调用上述插件的create方法

3. 在阿里iconfont选择对应的icon并下载

4. 使用工具将ttf文件生成对应的json文件

5. ios：将ttf文件引入build phase的link中

6. ios: 在info 中添加iconfont.ttf信息

7. android: 在app/build中添加以下代码

project.ext.vectoricons = [
    iconFontNames: ['iconfont.ttf' ] //添加你需要赋值的字符文件
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

8. android: 将生成的ttf文件复制到app/src/main/assets/fonts文件中

八、 国际化

问题

1. react-native-i18n设置语言后无法实时更新

2. 页面必须手动触发render才会有效果

3. react-navigation中的tabbar和title也无法更新

解决思路

1. 所有页面都是由react-navigation包裹的，触发react-navigation的更新即可刷新所有页面

 let { refresh } = this.state;
    return (
      <Root>
        <AppNavigator
          onNavigationStateChange={this.onNavigationStateChange}
          screenProps={{ refresh }}
        />
      </Root>
    );

通过eventBus触发refresh的更新

2. 底部tabbar在页面渲染之前就生成了，故上述一对tabbar无效

<AppNavigator
          onNavigationStateChange={this.onNavigationStateChange}
          screenProps={{ refresh, tabLabel }}
        />


navigationOptions: ({ screenProps }) => ({
      tabBarLabel: screenProps.tabLabel.home,
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon name={focused ? "home2" : "home1"} size={25} color={tintColor} />
      ),
      header: null
    })

通过ScreenProps将值传入createBottomTabNavigator，然后在跟页面里设置ScreenProps，并在eventBus回调中动态改变

九、 启动图和图标

图标

1. ios:通过图标工厂制作不同尺寸图标

2. ios:选择images.xcassets,并按appicon的设置将不同尺寸的图片上传

3. ios:在general中选择appicon

4. android:通过图标工厂制作不同尺寸的图片

5. android:将图标放入app/src/main/res文件夹下

6. android:在androidManifest中改图标名称

启动图

1. 通过图标工厂制作安卓和ios不同尺寸的图标

2. ios: 在images.xcassets中添加launchImages,并按尺寸上传

3. ios:删除launchScreen.xib文件

4. ios:general中选择launchImages,launchScreenfile为空

5. 删除app，重新加载

6. android:将生成的图标放入app/src/main/res文件加下

7. android: 在上述文件夹下新建layout/launch_screen.xml，内容如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/screen" android:scaleType="centerCrop" />
</RelativeLayout>

8. android: 新建drawable/icon.png文件，不然无法打包通过