From 76cfcc2b5afe69b3f40a5b905b70c5ab0fc53fb7 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Fri, 27 Dec 2019 09:12:50 +0000 Subject: [PATCH] Deploy website Deploy website version based on c31e9f0324230de585a847c6a717f0d1a97359c5 --- docs/next/flexbox.html | 64 ++++++------ docs/next/flexbox/index.html | 64 ++++++------ docs/next/getting-started.html | 2 +- docs/next/getting-started/index.html | 2 +- docs/next/hermes.html | 6 +- docs/next/hermes/index.html | 6 +- docs/next/modal.html | 15 +-- docs/next/modal/index.html | 15 +-- docs/next/picker.html | 140 ++++++++++++--------------- docs/next/picker/index.html | 140 ++++++++++++--------------- 10 files changed, 192 insertions(+), 262 deletions(-) diff --git a/docs/next/flexbox.html b/docs/next/flexbox.html index 5793efbc941..4b6b7ad6fe5 100644 --- a/docs/next/flexbox.html +++ b/docs/next/flexbox.html @@ -75,17 +75,17 @@

Flex

flex will define how your items are going to “fill” over the available space along your main axis. Space will be divided according to each element's flex property.

-

In the following example, the red, yellow, and green views are all children in the container view that has flex: 1 set. The red view uses flex: 1 , the yellow view uses flex: 2, and the green view uses flex: 3 . 1+2+3 = 6, which means that the red view will get 1/6 of the space, the yellow 2/6 of the space, and the green 3/6 of the space.

+

In the following example the red, yellow and the green views are all children in the container view that has flex: 1 set. The red view uses flex: 1 , the yellow view uses flex: 2 and the green view uses flex: 3 . 1+2+3 = 6 which means that the red view will get 1/6 of the space, the yellow 2/6 of the space and the green 3/6 of the space.

Flex

Flex Direction

flexDirection controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.

-

You can learn more here.

+

LEARN MORE HERE

Flex Direction

Layout Direction

-

Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge start and end refer to. By default, React Native lays out with LTR layout direction. In this mode start refers to left and end refers to right.

+

Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge start and end refer to. By default React Native lays out with LTR layout direction. In this mode start refers to left and end refers to right.

Justify Content

justifyContent describes how to align children within the main axis of their container. For example, you can use this property to center a child horizontally within a container with flexDirection set to row or vertically within a container with flexDirection set to column.

@@ -129,11 +129,11 @@

  • flex-start(default value) Align children of a container to the start of the container's main axis.

  • flex-end Align children of a container to the end of the container's main axis.

  • center Align children of a container in the center of the container's main axis.

    • -

  • space-between Evenly space off children across the container's main axis, distributing the remaining space between the children.

    • -

  • space-around Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to space-between, using space-around will result in space being distributed to the beginning of the first child and end of the last child.

    • -

  • space-evenly Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

    • +

  • space-between Evenly space of children across the container's main axis, distributing remaining space between the children.

    • +

  • space-around Evenly space of children across the container's main axis, distributing remaining space around the children. Compared to space-between using space-around will result in space being distributed to the beginning of the first child and end of the last child.

    • +

  • space-evenly Evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

    • -

    You can learn more here.

    +

    LEARN MORE HERE

    Edit

    Picker

    Renders the native picker component on Android and iOS. Example:

    -
    +
    <Picker
+  selectedValue={this.state.language}
+  style={{height: 50, width: 100}}
+  onValueChange={(itemValue, itemIndex) =>
+    this.setState({language: itemValue})
+  }>
+  <Picker.Item label="Java" value="java" />
+  <Picker.Item label="JavaScript" value="js" />
+</Picker>
+
    +

    Reference

    Props

    Inherits View Props.

    -

    enabled

    -

    If set to false, the picker will be disabled, i.e. the user will not be able to make a selection.

    - - - - - - - -
    TypeRequiredPlatform
    boolNoAndroid
    -
    -

    itemStyle

    -

    Style to apply to each of the item labels.

    - - - - - - - -
    TypeRequiredPlatform
    text stylesNoiOS
    -
    -

    mode

    -

    On Android, specifies how to display the selection items when the user taps on the picker:

    -
      -
    • 'dialog': Show a modal dialog. This is the default.
      • -
    • 'dropdown': Shows a dropdown anchored to the picker view
      • -
    - - - - - - - -
    TypeRequiredPlatform
    enum('dialog', 'dropdown')NoAndroid
    -

    onValueChange

    Callback for when an item is selected. This is called with the following parameters:

      @@ -155,17 +98,6 @@
      -

      prompt

      -

      Prompt string for this picker, used on Android in dialog mode as the title of the dialog.

      - - - - - - - -
      TypeRequiredPlatform
      stringNoAndroid
      -

      selectedValue

      Value matching value of one of the items. Can be a string or an integer.

      @@ -197,7 +129,55 @@
      stringNo
      -
    ← ModalPickerIOS →
    Edit

    Picker

    Renders the native picker component on Android and iOS. Example:

    -
    +
    <Picker
+  selectedValue={this.state.language}
+  style={{height: 50, width: 100}}
+  onValueChange={(itemValue, itemIndex) =>
+    this.setState({language: itemValue})
+  }>
+  <Picker.Item label="Java" value="java" />
+  <Picker.Item label="JavaScript" value="js" />
+</Picker>
+
    +

    Reference

    Props

    Inherits View Props.

    -

    enabled

    -

    If set to false, the picker will be disabled, i.e. the user will not be able to make a selection.

    - - - - - - - -
    TypeRequiredPlatform
    boolNoAndroid
    -
    -

    itemStyle

    -

    Style to apply to each of the item labels.

    - - - - - - - -
    TypeRequiredPlatform
    text stylesNoiOS
    -
    -

    mode

    -

    On Android, specifies how to display the selection items when the user taps on the picker:

    -
      -
    • 'dialog': Show a modal dialog. This is the default.
      • -
    • 'dropdown': Shows a dropdown anchored to the picker view
      • -
    - - - - - - - -
    TypeRequiredPlatform
    enum('dialog', 'dropdown')NoAndroid
    -

    onValueChange

    Callback for when an item is selected. This is called with the following parameters:

      @@ -155,17 +98,6 @@
      -

      prompt

      -

      Prompt string for this picker, used on Android in dialog mode as the title of the dialog.

      - - - - - - - -
      TypeRequiredPlatform
      stringNoAndroid
      -

      selectedValue

      Value matching value of one of the items. Can be a string or an integer.

      @@ -197,7 +129,55 @@
      stringNo
      -
    ← ModalPickerIOS →