first commit.

.gitignore

@@ -0,0 +1 @@
+node_modules

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "react-native"]
+	path = react-native
+	url = https://github.com/facebook/react-native.git
+	branch = gh-pages

README.md

@@ -0,0 +1,26 @@
+React Native Doc
+===
+
+这里是本地离线预览 React Native 文档的方法，解决因官网 CDN 资源导致无法打开官方文档网站。
+
+## 下载工程
+
+```bash
+git clone https://github.com/jaywcjlove/react-native-doc.git --depth=1 --recurse-submodules
+```
+
+## 安装依赖
+
+```bash
+npm install
+```
+
+## 启动服务
+
+```
+npm run start
+```
+
+## 注意
+
+虽然本地预览静态服务，但仍有很多链接是走 `CDN`，通过运行脚本来替换

cdn/codeblocks.js

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable module-strict */
+
+(function() {
+  'use strict';
+  if (typeof document === 'undefined') {
+    // Not on browser
+    return;
+  }
+
+  document.addEventListener('DOMContentLoaded', init);
+
+  function init() {
+    var mobile = isMobile();
+
+    var webPlayerList = document.querySelectorAll('.web-player');
+
+    // Either show interactive or static code block, depending on desktop or mobile
+    for (var i = 0; i < webPlayerList.length; ++i) {
+      webPlayerList[i].classList.add(mobile ? 'mobile' : 'desktop');
+
+      if (!mobile) {
+        // Determine location to look up required assets
+        var assetRoot = encodeURIComponent(
+          document.location.origin + '/react-native'
+        );
+
+        // Set iframe src. Do this dynamically so the iframe never loads on mobile.
+        var iframe = webPlayerList[i].querySelector('iframe');
+        iframe.src =
+          iframe.getAttribute('data-src') + '&assetRoot=' + assetRoot;
+      }
+    }
+
+    window.ExpoSnack && window.ExpoSnack.initialize();
+
+    var snackPlayerList = document.querySelectorAll('.snack-player');
+
+    // Either show interactive or static code block, depending on desktop or mobile
+    for (var i = 0; i < snackPlayerList.length; ++i) {
+      var snackPlayer = snackPlayerList[i];
+      var snackDesktopPlayer = snackPlayer.querySelectorAll(
+        '.desktop-friendly-snack'
+      )[0];
+      var plainCodeExample = snackPlayer.querySelectorAll(
+        '.mobile-friendly-snack'
+      )[0];
+
+      if (mobile) {
+        snackDesktopPlayer.remove();
+        plainCodeExample.style.display = 'block';
+      } else {
+        plainCodeExample.remove();
+      }
+    }
+
+    var backdrop = document.querySelector('.modal-backdrop');
+    if (!backdrop) {
+      return;
+    }
+
+    var modalButtonOpenList = document.querySelectorAll('.modal-button-open');
+    var modalButtonClose = document.querySelector('.modal-button-close');
+
+    backdrop.addEventListener('click', hideModal);
+    modalButtonClose.addEventListener('click', hideModal);
+
+    // Bind event to NodeList items
+    for (var i = 0; i < modalButtonOpenList.length; ++i) {
+      modalButtonOpenList[i].addEventListener('click', showModal);
+    }
+  }
+
+  function showModal(e) {
+    var backdrop = document.querySelector('.modal-backdrop');
+    if (!backdrop) {
+      return;
+    }
+
+    var modal = document.querySelector('.modal');
+
+    backdrop.classList.add('modal-open');
+    modal.classList.add('modal-open');
+  }
+
+  function hideModal(e) {
+    var backdrop = document.querySelector('.modal-backdrop');
+    if (!backdrop) {
+      return;
+    }
+
+    var modal = document.querySelector('.modal');
+
+    backdrop.classList.remove('modal-open');
+    modal.classList.remove('modal-open');
+  }
+
+  // Primitive mobile detection
+  function isMobile() {
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+  }
+})();

cdn/codetabs.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Turn off ESLint for this file because it's sent down to users as-is.
+/* eslint-disable */
+window.addEventListener('load', function() {
+  // add event listener for all tab
+  document.querySelectorAll('.nav-link').forEach(function(el) {
+    el.addEventListener('click', function(e) {
+      const groupId = e.target.getAttribute('data-group');
+      document
+        .querySelectorAll(`.nav-link[data-group=${groupId}]`)
+        .forEach(function(el) {
+          el.classList.remove('active');
+        });
+      document
+        .querySelectorAll(`.tab-pane[data-group=${groupId}]`)
+        .forEach(function(el) {
+          el.classList.remove('active');
+        });
+      e.target.classList.add('active');
+      document
+        .querySelector(`#${e.target.getAttribute('data-tab')}`)
+        .classList.add('active');
+    });
+  });
+});

cdn/dissectionAnimation.js

@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const section = document.querySelector('.NativeDevelopment');
+  const dissection = document.querySelector('.NativeDevelopment .dissection');
+  const images = dissection.children;
+  const numImages = images.length;
+
+  const fadeDistance = 40;
+  const navbarHeight = 60;
+
+  function clamp(val, min, max) {
+    return Math.min(max, Math.max(min, val));
+  }
+
+  // Scale the percent so that `min` goes to 0% and `max` goes to 100%
+  function scalePercent(percent, min, max) {
+    const scale = max - min;
+    return clamp((percent - min) / scale, 0, 1);
+  }
+
+  // Get the percentage that the image should be on the screen given
+  // how much the entire container is scrolled
+  // so we can fine-tune at what screen % the animation starts and stops
+  function getImagePercent(index, scrollPercent) {
+    const start = index / numImages;
+    return clamp((scrollPercent - start) * numImages, 0, 1);
+  }
+
+  window.addEventListener('scroll', () => {
+    const elPos = section.getBoundingClientRect().top - navbarHeight;
+    const height = window.innerHeight;
+    const screenPercent = 1 - clamp(elPos / height, 0, 1);
+    const scaledPercent = scalePercent(screenPercent, 0.2, 0.9);
+    for (let i = 0; i < numImages; i++) {
+      const imgPercent = getImagePercent(i, scaledPercent);
+      images[i].style.opacity = imgPercent;
+
+      const translation = fadeDistance * (1 - imgPercent);
+      images[i].style.left = `${translation}px`;
+    }
+  });
+});