RN转H5遇到的问题
我是用这个插件转的：react-native-web，首先在配置webpack的时候参照了一个脚手架生成的项目（生成的这个rn项目里有webpack配置，脚手架是react-native-web-cli，下面有react-native-web-cli的介绍），在配置webpack的时候遇到了很多问题，也学会了很多东西，下面是转h5时遇到的主要问题和解决办法。
1 babel配置：由于是原生的项目，在node_modules包里有一些ts的语法，Babel解析时报错，导致在本地其项目的时候编译不通过报错，后来发现新的babel已经集成了ts-loader，在配置的时候需要加上插件（插件需要先安装）：
plugins: [ '@babel/plugin-proposal-export-default-from', // 编译时报can not export的错 '@babel/plugin-transform-flow-strip-types' // 编译时不支持type关键字报错 ]
2 路由的问题：开始用的react-navagation，这个插件网上资料比较多，用的也很广泛，但是转H5后发现从一个页面跳转到下一个页面的时候，前一个页面只是设置了opacity为0，高度并没有边，导致页面出现了空白并把下一个页面顶下去了，向下滚动页面才能看见，需要监听路由的进入和离开来给他设置样式：
componentDidMount() { this.props.navigation.addListener('willBlur', () => { this.setState({container: 'containerOut'}) }); this.props.navigation.addListener('willFocus', () => { this.setState({container: 'containerIn'}) }); }
由于每个页面都有个padding-top（否则会被上边的导航条遮挡），这样在每进入一个新的页面padding-top就会叠加，所以每个页面设置的样式都不一样，之后就考虑换个插件试试了，试了好多（react-native-router-flux；react-router-native；react-native-navigation；react-native-navigator-router），最后用了react-native-router-flux，这个用的人也比较多，网上资料也比较多（大多数都是翻译的官方API文档。。。）看介绍说是在react-navagation基础之上封装的，主要解决了react-navagation的一些问题，并且易用性比较好，考虑他可能会解决上边的问题，于是下载了一个demo发现转h5后那个问题真的不存在了，就开始往我们的项目里转了。开始用的3.37.0版本，转h5后发现navbar不能用配置来实现，需要自己写组件，写组件之后发现跳转页面不能用Actions.push()方法，但是网上都说这个可以，后来发现3.37.0版本里还没有这个方法，换了4.0.0后有这个方法了，但是页面白屏了，发现转h5后最外层的div没有高度，在Router标签里配置也不好使，最后在Router标签外边套了一层View给了高度页面才出来，下边是配置路由的代码：
<View style={styles.wrap}> //这里给的高度是获取的设备的高度
<Router sceneStyle={styles.sceneStyle}>
<Scene key="root" navBar={NavBar}> // 每个页面都有NavBar，在这里统一配置
<Scene key="c"
component={c} 引用组件c
title="1" // 设置导航标题
rightTitle="1" // 导航右部标题
rightJumpTo="a" // 右部导航要跳转的路由的名字
/>
<Scene
key="a"
component={a}
title="1"
rightTitle="1"
rightJumpTo="w"
/>
<Scene
key="w"
component={w}
title="1"
/>
</Scene>
</Router>
</View>
下边是NavBar组件：
import React, {Component} from 'react';
import {
TouchableOpacity,
View,
Image,
Alert,
NativeModules,
StyleSheet,
Text
} from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class NavBackButton extends Component {
constructor(props){
super(props)
}
render() {
let {title, rightTitle='', rightJumpTo=''} = this.props;
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => {Actions.pop()}}>
<Image source={require('../images/rn_icon_nav_return.png')} style={styles.back}/>
</TouchableOpacity>
<Text style={styles.txt}>{title}</Text>
<TouchableOpacity onPress={() => {Actions.push(rightJumpTo)}}>
<Text style={styles.txt}>{rightTitle}</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 64,
width: '100%',
backgroundColor: '#5aa5ff',
top: 0,
position: 'absolute',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 10
},
txt: {
color: '#fff',
fontSize: 18
},
back: {
width: 25,
height: 25
}
});
react-native-web-cli（转自：https://blog.csdn.net/weixin_34234721/article/details/87976045）
安装：npm i -g rnw
创建项目：rnw HelloReactNativeWeb
内部机制：
一键生成支持 React-Native 和 React-Native-Web 的项目
使用 react-native-cli 创建最新的 react-native 项目
使用 Webpack4 和 babel7 进行 React 的编译
默认配置好 Typescript 环境, 只需要把文件后缀改为 .tsx 即可; Web 端和 Native 端均支持。
使用 WebpackDll 把 package.json 中的 dll 标记过得第三方库进行预先打包，减少平时开发期间的编译时间
内置一个基于 react-router 的跨平台 Navigation 组件
兼容 React-Native 和 React
同步 url 地址
支持 Web 端的左滑返回（Native 端还未实现）
预先设置好了 Redux 配合 Immutable 的基础模板，不使用 Redux 可以自行删除
配置好 eslint 进行检查，并且 git commit 时会进行 eslint 校验
有时间把git的地址贴出来。。。。。。
