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（转自：http://www.javashuo.com/article/p-kurwbrdt-r.html）

安装：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的地址贴出来。。。。。。