一、 数据+状态方案记录
页面发起actions
store中掉接口
接口通过api封装，非交互数据请求到后做model处理（仅部分数据做了）
model后的数据通过reducer存入state
通过connect将state按需注入页面
形成闭环，首屏数据统一存入state，api和action结合，页面注入和触发，形成前端小范围mvc结构
二、罗列知识点
基本知识
react的jsx写法
es6,7用法
react-native提供的api
四大支柱
axios封装和配置
redux生态链
react-navigation各项配置
公共方法的归类和注入
板块设计
板块规则
组件树设计
插件和原生
熟悉react-native社区
看懂插件文档
原生的基本知识
三、 热更新和热部署
RN最吸引人的特性就是可以在ios和安卓上实现热部署，避过app store的审查
原理
本地代码集成codepush的sdk
将更新后的内容发布到codepush
本地代码每次打开时会比对codepush服务器上的版本和本地版本是否一致，不一致会触发更新
实现实时更新
具体配置地址
https://www.jianshu.com/p/6a5e00d22723
一些命令
查看当前登录用户
code-push whoami创建应用
// code-push app add 应用名 版本 平台
code-push app add test-android android react-native查看当前已创建 app 应用列表
code-push app list重命名app：
code-push app rename <appName> <newAppName>移除app：
code-push app rm <appName>查看app的部署：
code-push deployment ls <appName> [--displayKeys|-k]查看app的某个部署的发布更新的历史记录：
code-push deployment history <appName> <deploymentName> [--displayAuthor|-a]发布更新：
code-push release-react 《应用名》 ios -t "1.0.0" --des "测试热更新" -d Stagingdebug：
code-push debug <platform>查看已应用对应的 key 值
code-push deployment ls 《应用名》 -k清空app的更新
code-push deployment clear <appName> Production or Staging
四、 react-navigation
RN最常用的路由组件
简介
react-navigation分为三个部分。
StackNavigator类似顶部导航条，用来跳转页面和传递参数。
TabNavigator类似底部标签栏，用来区分模块。
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
- react-native-device-info
注意 该库使用的是androidx，和当前大部分android support不兼容
react-native-gesture-handler
react-native-i18n
react-native-image-crop-picker
react-native-picker
react-native-signature-capture
react-native-splash-screen
react-native-webview
rn-fetch-blob
六、 当androidx和support冲突时
通过./gradlew :app : dependencies查看哪个依赖使用了androidx
回退该依赖为支持support的版本
七、 集成自定义iconfont
安装react-native-vector-icons插件
书写icon组件，调用上述插件的create方法
在阿里iconfont选择对应的icon并下载
使用工具将ttf文件生成对应的json文件
ios：将ttf文件引入build phase的link中
ios: 在info 中添加iconfont.ttf信息
android: 在app/build中添加以下代码
project.ext.vectoricons = [
iconFontNames: ['iconfont.ttf' ] //添加你需要赋值的字符文件
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
- android: 将生成的ttf文件复制到app/src/main/assets/fonts文件中
八、 国际化
问题
react-native-i18n设置语言后无法实时更新
页面必须手动触发render才会有效果
react-navigation中的tabbar和title也无法更新
解决思路
- 所有页面都是由react-navigation包裹的，触发react-navigation的更新即可刷新所有页面
let { refresh } = this.state;
return (
<Root>
<AppNavigator
onNavigationStateChange={this.onNavigationStateChange}
screenProps={{ refresh }}
/>
</Root>
);
通过eventBus触发refresh的更新
- 底部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回调中动态改变
九、 启动图和图标
图标
ios:通过图标工厂制作不同尺寸图标
ios:选择images.xcassets,并按appicon的设置将不同尺寸的图片上传
ios:在general中选择appicon
android:通过图标工厂制作不同尺寸的图片
android:将图标放入app/src/main/res文件夹下
android:在androidManifest中改图标名称
启动图
通过图标工厂制作安卓和ios不同尺寸的图标
ios: 在images.xcassets中添加launchImages,并按尺寸上传
ios:删除launchScreen.xib文件
ios:general中选择launchImages,launchScreenfile为空
删除app，重新加载
android:将生成的图标放入app/src/main/res文件加下
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>
- android: 新建drawable/icon.png文件，不然无法打包通过
