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,
         '100%',
        backgroundColor: '#5aa5ff',
        top: 0,
        position: 'absolute',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 10
    },
    txt: {
        color: '#fff',
        fontSize: 18
    },
    back: {
         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的地址贴出来。。。。。。