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的地址貼出來。。。。。。