我是用這個插件轉的：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的地址貼出來。。。。。。