構建 F8 2016 App 附錄 III 將 F8 應用移植到 windows 平臺—使用 React Native 開發

上一篇：構建 F8 2016 App 附錄 II 使用 Relay 和 GraphQL

大家可能已經了解到，微軟正努力將 React Native 引入到 windows 通用應用平臺。對于 React Native 開發者來說，這是一個可以讓自己的應用到達 2.7 億 windows 10 用戶（包括手機、電腦、xbox 甚至是 hololens VR眼鏡）的絕佳機會。基于同 非死book 的合作以及將 React Native 引入到 windows 所要作出的努力，我們在 windows 應用商店發布了 F8 開發者大會應用。 所有代碼的移植基于最近開源的 F8 github 代碼庫。

下面這個視頻演示了在UWP( windows 通用應用平臺)上運行的 F8 應用中源自 React Native 的部分特性：https://www.油Tube.com/watch?v=51_M9Dp5X80&feature=youtu.be (國內用戶或許不能訪問)

將 F8 應用移植到 windows 平臺占用了一個 3 人小組 80/100 的時間，歷時 3 周完成。我們將此數據完全透明的公布給大家，主要是基于這樣的考慮：決策是否使用 React Native 這樣的技術來進行開發，開發效率是一個很重要的參考指標。

雖然我們揭開了 React Native 在 windows 平臺開發的序幕，但當前 React Native 的部分核心視圖管理器和原生模塊在 windows 上仍不可用， React Native 的第三方依賴庫也都還不支持 windows 平臺。具體就這個應用來說，缺少針對菜單和過濾器的 SplitView 視圖管理器；缺少切換 tab 和會話頁的FlipView視圖管理器; 在滾動視圖管理器里面，缺少合適的運行事件用來處理拖拽和內容視圖更新。我們也缺少一個剪貼板模塊-用來拷貝粘貼 wifi 的詳情；缺少用作導航狀態存儲的異步存儲模塊；缺少用作登出和其他警告處理的對話框模塊；也缺少一個用來處理應用的信息tab頁中的鏈接行為的啟動器模塊。對于第三方模塊，我們缺少線性漸變視圖管理器、非死book sdk 模塊、 React Native 分享模塊。其中一部分，例如啟動器模塊，花了我們小半天時間搞定。其他更復雜的模塊，比如 非死book sdk 模塊，花了我們超過 1 天的時間；這里主要的工作量在于找到恰當的原生 api 依賴，然后實現功能并且測試。

當我們將要把應用發布到應用商店時，發現有一些細節還沒有考慮到：發布到商店的應用必須使用 .net 原生環境編譯。我們運氣不錯，很快搞定了這件事。因為其中只有很少的一部分 api 是 .net 原生環境所不支持的（主要是關于反射方面的）；我們只需要解決這部分反射相關的問題。

我們對應用作了一些設計和風格上的調整以讓它在 windows phone 上看起來更棒。這里我不會給出太多的細節，因為非死book 已經詳細的闡述了如何用 React Native 為 android 和iOS 作平臺定制開發, 而這些定制開發的原則也同樣適用于 windows 平臺。剔除內核適配、第三方組件適配開發以及發布到應用商店這些工作量，通過 js 語言實現的 windows 平臺定制開發和風格調整僅花了 1 名開發者不到 1 周的時間。請大家留意這個工作量估計，因為在可期待的未來—當 React Native 在 Windows 平臺上的成熟度接近 iOS 和 android 的時候，這就是 React Native 應用移植到 windows 時開發者的唯一工作量。下面我給出了一些例子來展現如何讓 windows 應用變得不同（與 iOS 和 android 應用相比）。

F8 ListContainer 組件的平臺特定風格設置代碼:

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  listView: {
    ios: {
      backgroundColor: 'transparent',
    },
    android: {
      backgroundColor: 'white',
    },
    windows: {
      backgroundColor: 'white',
    }
  },
  headerTitle: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
  },
});

F8TabsView.window.js 中：

class F8TabsView extends React.Component {
  ...

  render() {
    return (
      <F8SplitView
        ref="splitView"
        paneWidth={290}
        panePosition="left"
        renderPaneView={this.renderPaneView}>
        <View style={styles.content} key={this.props.tab}>
          {this.renderContent()}
        </View>
      </F8SplitView>
    );
  }

  ...
}

對比 F8TabsView.android.js：

class F8TabsView extends React.Component {
  ...

  render() {
    return (
      <F8DrawerLayout
        ref="drawer"
        drawerWidth={290}
        drawerPosition="left"
        renderNavigationView={this.renderNavigationView}>
        <View style={styles.content} key={this.props.tab}>
          {this.renderContent()}
        </View>
      </F8DrawerLayout>
    );
  }

  ...
}

對比 F8TabsView.ios.js：

class F8TabsView extends React.Component {
  ...

  render() {
    return (
      <TabBarIOS tintColor={F8Colors.darkText}>
        <TabBarItemIOS>
          ...
        </TabBarItemIOS>
        ...
      </TabBarIOS>
    );
  }

  ...
}

React Native 的理念是做一個“水平的平臺“，意思是更傾向于"learn once, write anywhere"，以區別于 java 的"write once, run everywhere"。雖然我們的 F8 windows 應用體驗接近于 Android，但如果有更多的開發時間，我們很可能會修改其界面和菜單讓它看起來更像是一個 windows 應用。例如在 XAML 中，SplitView 支持一種緊湊的顯示模式，其 panel 關閉時該視圖僅從一個下拉菜單里顯示所有的 icon 圖片。對應用的桌面版本和 continuum 特性來說，這個體驗很棒。同時，在 XAML 中 pivot 被廣泛用于翻頁，擁有 pivot 風格的頁面和會話標題對 windows 用戶來說將會是更熟悉的體驗。

總的來說，我們基于 React Native 將 F8 開發者大會應用移植到 windows 的過程讓人感覺很好； React Native 應用移植到 windows 平臺也將會變得越來越容易。我們希望我們所作出的努力可以證明在 windows 平臺上用 React Native 開發絕不僅僅是實驗性質的。通過社區的強大支持，它可能為你的 React Native 應用帶來更廣泛的受眾（來自 windows 平臺的用戶）；這是一個屬于 React Native 開發者的絕好機會。

在 5 月 13 日愛爾蘭都柏林舉行的 DECODED Conference 上，我們將繼續討論此次移植的經驗以及其他一些關于在 windows 上使用 React Native 的議題。此外，這里有一篇文章，分享了另一個微軟的團隊在 UWP 平臺上使用 CodePush 實現 React Native 代碼熱更新的經驗。 特別感謝 Matt Podwysocki 和 Eero Bragge ，是他們的努力工作才得以讓 F8 windows 應用如期到來。

來自：pockry