Improve example

2026-04-24 12:35:39 +08:00 · 2018-06-20 13:51:34 -07:00
parent 1cfe01dbdb
commit c518e7f36c
3 changed files with 81 additions and 70 deletions
--- a/examples/NavigationPlayground/js/App.js
+++ b/examples/NavigationPlayground/js/App.js
@@ -107,7 +107,7 @@ const ExampleInfo = {
    description: 'Nested stack navigation that pushes on top of tabs',
  },
  StacksOverTopTabs: {
-    name: 'Stacks over Top Tabs with non-standard header height',
+    name: 'Stacks with non-standard header height',
    description: 'Tab navigator in stack with custom header heights',
  },
  StacksWithKeys: {
--- a/examples/NavigationPlayground/js/StacksOverTopTabs.js
+++ b/examples/NavigationPlayground/js/StacksOverTopTabs.js
@@ -17,7 +17,7 @@ import { Button } from './commonComponents/ButtonWithMargin';

 const HEADER_HEIGHT = 64;

-const MyNavScreen = ({ navigation, banner }) => (
+const MyNavScreen = ({ navigation, banner, statusBarStyle }) => (
  <ScrollView>
    <SafeAreaView forceInset={{ horizontal: 'always' }}>
      <SampleText>{banner}</SampleText>
@@ -35,12 +35,16 @@ const MyNavScreen = ({ navigation, banner }) => (
      />
      <Button onPress={() => navigation.goBack(null)} title="Go back" />
    </SafeAreaView>
-    <StatusBar barStyle="default" />
+    <StatusBar barStyle={statusBarStyle || 'default'} />
  </ScrollView>
 );

 const MyHomeScreen = ({ navigation }) => (
-  <MyNavScreen banner="Home Screen" navigation={navigation} />
+  <MyNavScreen
+    banner="Home Screen"
+    navigation={navigation}
+    statusBarStyle="light-content"
+  />
 );

 const MyProfileScreen = ({ navigation }) => (
@@ -55,7 +59,11 @@ const MyNotificationsSettingsScreen = ({ navigation }) => (
 );

 const MySettingsScreen = ({ navigation }) => (
-  <MyNavScreen banner="Settings Screen" navigation={navigation} />
+  <MyNavScreen
+    banner="Settings Screen"
+    navigation={navigation}
+    statusBarStyle="light-content"
+  />
 );

 const styles = StyleSheet.create({
@@ -69,8 +77,13 @@ const styles = StyleSheet.create({

 function MaterialTopTabBarWithStatusBar(props) {
  return (
-    <View style={{ paddingTop: Constants.statusBarHeight }}>
-      <MaterialTopTabBar {...props} />
+    <View
+      style={{
+        paddingTop: Constants.statusBarHeight,
+        backgroundColor: '#2196f3',
+      }}
+    >
+      <MaterialTopTabBar {...props} jumpToIndex={() => {}} />
    </View>
  );
 }
@@ -104,7 +117,6 @@ const StackNavigator = createStackNavigator(
      screen: TabNavigator,
      navigationOptions: {
        header: null,
-        headerMode: 'none',
      },
    },
    NotifSettings: {
--- a/yarn.lock
+++ b/yarn.lock
@@ -3,14 +3,14 @@


 "@babel/code-frame@^7.0.0-beta.35":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.49.tgz#becd805482734440c9d137e46d77340e64d7f51b"
+  version "7.0.0-beta.51"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.51.tgz#bd71d9b192af978df915829d39d4094456439a0c"
  dependencies:
-    "@babel/highlight" "7.0.0-beta.49"
+    "@babel/highlight" "7.0.0-beta.51"

-"@babel/highlight@7.0.0-beta.49":
-  version "7.0.0-beta.49"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.49.tgz#96bdc6b43e13482012ba6691b1018492d39622cc"
+"@babel/highlight@7.0.0-beta.51":
+  version "7.0.0-beta.51"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.51.tgz#e8844ae25a1595ccfd42b89623b4376ca06d225d"
  dependencies:
    chalk "^2.0.0"
    esutils "^2.0.2"
@@ -59,8 +59,8 @@ acorn@^3.0.4:
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"

 acorn@^5.0.0, acorn@^5.3.0, acorn@^5.5.0:
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.6.2.tgz#b1da1d7be2ac1b4a327fb9eab851702c5045b4e7"
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.1.tgz#f095829297706a7c9776958c0afc8930a9b9d9d8"

 ajv-keywords@^2.1.0:
  version "2.1.1"
@@ -174,8 +174,8 @@ aproba@^1.0.3:
  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"

 arch@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.0.tgz#3613aa46149064b3c1f0607919bf1d4786e82889"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.1.1.tgz#8f5c2731aa35a30929221bb0640eed65175ec84e"

 are-we-there-yet@~1.1.2:
  version "1.1.5"
@@ -1082,8 +1082,8 @@ bcrypt-pbkdf@^1.0.0:
    tweetnacl "^0.14.3"

 big-integer@^1.6.7:
-  version "1.6.30"
-  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.30.tgz#7796f04acdd6ba56345f19049c8fffd427f09d16"
+  version "1.6.31"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.31.tgz#6d7852486e67c642502dcc03f7225a245c9fc7fa"

 binary-extensions@^1.0.0:
  version "1.11.0"
@@ -1157,8 +1157,8 @@ browser-process-hrtime@^0.1.2:
  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.2.tgz#425d68a58d3447f02a04aa894187fce8af8b7b8e"

 browser-resolve@^1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
  dependencies:
    resolve "1.1.7"

@@ -1385,14 +1385,14 @@ collection-visit@^1.0.0:
    object-visit "^1.0.0"

 color-convert@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.2.tgz#49881b8fba67df12a96bdf3f56c0aab9e7913147"
  dependencies:
-    color-name "^1.1.1"
+    color-name "1.1.1"

-color-name@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+color-name@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"

 color-support@^1.1.3:
  version "1.1.3"
@@ -1417,8 +1417,8 @@ common-tags@^1.4.0:
  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"

 compare-versions@^3.1.0:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.2.1.tgz#a49eb7689d4caaf0b6db5220173fd279614000f7"
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.3.0.tgz#af93ea705a96943f622ab309578b9b90586f39c3"

 component-emitter@^1.2.1:
  version "1.2.1"
@@ -1836,8 +1836,8 @@ envinfo@^3.0.0:
    which "^1.2.14"

 error-ex@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
  dependencies:
    is-arrayish "^0.2.1"

@@ -1879,8 +1879,8 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"

 escodegen@^1.9.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.10.0.tgz#f647395de22519fbd0d928ffcf1d17e0dec2603e"
  dependencies:
    esprima "^3.1.3"
    estraverse "^4.2.0"
@@ -2244,8 +2244,8 @@ fbjs-scripts@^0.8.1:
    through2 "^2.0.0"

 fbjs@^0.8.0, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
-  version "0.8.16"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
  dependencies:
    core-js "^1.0.0"
    isomorphic-fetch "^2.1.1"
@@ -2253,7 +2253,7 @@ fbjs@^0.8.0, fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
    object-assign "^4.1.0"
    promise "^7.1.1"
    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
+    ua-parser-js "^0.7.18"

 figures@^1.7.0:
  version "1.7.0"
@@ -2520,8 +2520,8 @@ global@^4.3.0:
    process "~0.5.1"

 globals@^11.0.1:
-  version "11.5.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.5.0.tgz#6bc840de6771173b191f13d3a9c94d441ee92642"
+  version "11.7.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.7.0.tgz#a583faa43055b1aca771914bf68258e2fc125673"

 globals@^9.18.0:
  version "9.18.0"
@@ -2645,8 +2645,8 @@ hoek@2.x.x:
  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"

 hoist-non-react-statics@^2.2.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"

 home-or-tmp@^2.0.0:
  version "2.0.0"
@@ -2725,8 +2725,8 @@ ignore@^3.3.3:
  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.8.tgz#3f8e9c35d38708a3a7e0e9abb6c73e7ee7707b2b"

 image-size@^0.6.0:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.2.tgz#8ee316d4298b028b965091b673d5f1537adee5b4"
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"

 import-local@^1.0.0:
  version "1.0.0"
@@ -4231,8 +4231,8 @@ number-is-nan@^1.0.0:
  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"

 nwsapi@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.2.tgz#33a0aab27c678d4dfdbba6a7f84b1c627fc4966f"
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.4.tgz#dc79040a5f77b97716dc79565fc7fc3ef7d50570"

 oauth-sign@~0.8.1, oauth-sign@~0.8.2:
  version "0.8.2"
@@ -4251,8 +4251,8 @@ object-copy@^0.1.0:
    kind-of "^3.0.3"

 object-keys@^1.0.8:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"

 object-visit@^1.0.0:
  version "1.0.1"
@@ -4581,8 +4581,8 @@ prettier-eslint@^8.8.1:
    typescript-eslint-parser "^11.0.0"

 prettier@^1.12.1, prettier@^1.7.0:
-  version "1.13.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.4.tgz#31bbae6990f13b1093187c731766a14036fa72e6"
+  version "1.13.5"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.5.tgz#7ae2076998c8edce79d63834e9b7b09fead6bfd0"

 pretty-format@^21.2.1:
  version "21.2.1"
@@ -4625,10 +4625,9 @@ promise@^7.1.1:
    asap "~2.0.3"

 prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
-  version "15.6.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
  dependencies:
-    fbjs "^0.8.16"
    loose-envify "^1.3.1"
    object-assign "^4.1.1"

@@ -4637,8 +4636,8 @@ pseudomap@^1.0.2:
  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"

 psl@^1.1.24:
-  version "1.1.27"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.27.tgz#2b2c77019db86855170d903532400bf71ee085b6"
+  version "1.1.28"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.28.tgz#4fb6ceb08a1e2214d4fd4de0ca22dae13740bc7b"

 punycode@^1.4.1:
  version "1.4.1"
@@ -4708,9 +4707,9 @@ react-devtools-core@3.0.0:
    shell-quote "^1.6.1"
    ws "^2.0.3"

-react-is@^16.4.0:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.0.tgz#cc9fdc855ac34d2e7d9d2eb7059bbc240d35ffcf"
+react-is@^16.4.1:
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"

 react-lifecycles-compat@^3, react-lifecycles-compat@^3.0.4:
  version "3.0.4"
@@ -4829,9 +4828,9 @@ react-navigation-deprecated-tab-navigator@1.3.0:
  dependencies:
    react-native-tab-view "^0.0.77"

-react-navigation-drawer@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.3.0.tgz#641007213f0f1e1b55a0a4bb64d71df07b3e7208"
+react-navigation-drawer@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.3.1.tgz#2135584c78e462fb9e952065d4951d5dd1b53924"
  dependencies:
    react-native-drawer-layout-polyfill "^1.3.2"

@@ -4861,13 +4860,13 @@ react-test-renderer@16.2.0:
    prop-types "^15.6.0"

 react-test-renderer@^16.0.0:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.0.tgz#0dbe0e24263e94e1830c7afb1f403707fad313a3"
+  version "16.4.1"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"
  dependencies:
    fbjs "^0.8.16"
    object-assign "^4.1.1"
    prop-types "^15.6.0"
-    react-is "^16.4.0"
+    react-is "^16.4.1"

 react-timer-mixin@^0.13.2:
  version "0.13.3"
@@ -5138,8 +5137,8 @@ resolve@1.1.7:
  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"

 resolve@^1.5.0, resolve@^1.6.0:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.7.1.tgz#aadd656374fd298aee895bc026b8297418677fd3"
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
  dependencies:
    path-parse "^1.0.5"

@@ -5833,10 +5832,10 @@ typescript-eslint-parser@^11.0.0:
    semver "5.4.1"

 typescript@^2.5.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.1.tgz#fdb19d2c67a15d11995fd15640e373e09ab09961"
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c"

-ua-parser-js@^0.7.9:
+ua-parser-js@^0.7.18:
  version "0.7.18"
  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"

@@ -6020,8 +6019,8 @@ whatwg-mimetype@^2.0.0, whatwg-mimetype@^2.1.0:
  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz#f0f21d76cbba72362eb609dbed2a30cd17fcc7d4"

 whatwg-url@^6.4.0, whatwg-url@^6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.1.tgz#fdb94b440fd4ad836202c16e9737d511f012fd67"
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
  dependencies:
    lodash.sortby "^4.7.0"
    tr46 "^1.0.1"