升级配置
1、node 版本最低配置8.9.1
切换node环境:sudo n 8.9.1,(目前RN node版本6.9.1)
2、项目配置
"prop-types": "^15.6.2",
"react": "16.8.3",
"react-native": "0.59.10"
升级适配过程遇到的问题
1.proptypes 问题
import PropTypes from ‘prop-types’;
// caller: React.PropTypes.string,
caller: PropTypes.string,
view.proptypes
import {
…
ViewPropTypes,
…
} from TNBase
// extraStyle: View.PropTypes.style
extraStyle: ViewPropTypes.style
2.Navigator
1、pull tuniuapp-rn
2、npm install
// 下面是问题解释
// react-native 中 Navigator 已废弃
1、npm i react-native-deprecated-custom-components
2、import { Navigator } from ‘react-native-deprecated-custom-components’;
3.BackAndroid
// BackAndroid 已废弃 使用 BackHandler 替换
let {
BackHandler,
} = TNBase;
4.Animated 动画问题
通过Animated修改View尺寸时，内部视图尺寸不会跟着变化，可以通过其他的方式，比如移除、设置位置暂时解决
Image 不可以包裹其他视图
更换为 ImageBackground
4.scrollTo 失效问题
1、如果是单独的 scrollView 页面启动时滚动失效，可以延迟1s滚动
2、如果是多个 scrollView 嵌套，可以为需要滚动的 scrollView 添加 scrollToOverflowEnabled={true}，不过会超出正常的 contentSize，如果引起其他问题可以慢慢调
适配内容
5.js中引用图片，去掉@2x,@3x
如:
<Image style={{marginLeft:9, width:14, height:14}} source={require('./../../images/rn_hotel_arrow_right@2x.png')}/>
修改为:
<Image style={{marginLeft:9, width:14, height:14}} source={require('./../../images/rn_hotel_arrow_right.png')}/>
可以使用快捷键，查找@2x,@3x,统一替换
6、undefined React.PropTypes.xx
旧用法：import {PropTypes} from "react";
新用法：import PropTypes from 'prop-types';
所有的React.PropTypes.xx 、 View.PropTypes.xx 改成PropTypes.xx
7、启动方式
react-native start --reset-cache
拆包方式
官方拆包metro-bundle方式
https://github.com/smallnew/react-native-multibundler
js项目结构：
.
├── js 业务模块、公共模块
├── index.ios.js ios debug入口文件
├── index.android.js 安卓 debug入口文件
├── README.md
├──android android项目目录
├── bundle.config.js 业务包的打包配置
├──iphone ios目录
├── package.json
├── common.config.js 基础包打包配置
├── platformDep.js 基础包打包入口
└── platformEmptyDefaultExport.js 基础包补丁,这行代码视为了让基础包引入node_modules_@babel_runtime_helpers_interopRequireDefault
网友评论