From 0dd57a54f623ee561417adfa435fe09fed0f69f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BD=97=E5=9D=A4?= <luokun199503@qq.com>
Date: Fri, 2 Aug 2024 18:52:34 +0800
Subject: [PATCH] chore: test

---
 .../__tests__/__snapshots__/demo.test.js.snap |   87 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  889 ++--
 .../__tests__/__snapshots__/demo.test.js.snap |  671 ++-
 .../__tests__/__snapshots__/demo.test.js.snap |    5 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  236 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  650 ++-
 .../__tests__/__snapshots__/demo.test.js.snap |  853 ++--
 .../__tests__/__snapshots__/demo.test.js.snap |  297 +-
 .../__snapshots__/index.test.js.snap          |   10 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 2831 +++---------
 .../__tests__/__snapshots__/demo.test.js.snap |  191 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 3829 ++++++++--------
 .../__tests__/__snapshots__/demo.test.js.snap |   10 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  543 ++-
 .../__tests__/__snapshots__/demo.test.js.snap | 3901 +++++++++--------
 .../__tests__/__snapshots__/demo.test.js.snap |  152 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 2080 +++++----
 .../__tests__/__snapshots__/demo.test.js.snap |    5 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   48 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  543 ++-
 20 files changed, 8648 insertions(+), 9183 deletions(-)

diff --git a/components/accordion/__tests__/__snapshots__/demo.test.js.snap b/components/accordion/__tests__/__snapshots__/demo.test.js.snap
index 6f54e091f..42021c821 100644
--- a/components/accordion/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/accordion/__tests__/__snapshots__/demo.test.js.snap
@@ -113,13 +113,22 @@ exports[`renders ./components/accordion/demo/basic.tsx correctly 1`] = `
             onLayout={[Function]}
             style={Object {}}
           >
-            <View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#f5f5f9",
+                  },
+                  undefined,
+                ]
+              }
+            >
               <View
                 style={
                   Object {
-                    "backgroundColor": "#ffffff",
-                    "borderTopColor": "#dddddd",
+                    "borderTopColor": "#eeeeee",
                     "borderTopWidth": 0.5,
+                    "position": "relative",
                   }
                 }
               >
@@ -166,27 +175,19 @@ exports[`renders ./components/accordion/demo/basic.tsx correctly 1`] = `
                         ]
                       }
                     >
-                      <View
+                      <Text
+                        numberOfLines={1}
                         style={
                           Object {
+                            "color": "#000000",
                             "flex": 1,
-                            "flexDirection": "column",
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
                           }
                         }
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            Object {
-                              "color": "#000000",
-                              "fontSize": 17,
-                              "textAlignVertical": "center",
-                            }
-                          }
-                        >
-                          Content 1
-                        </Text>
-                      </View>
+                        Content 1
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -233,27 +234,19 @@ exports[`renders ./components/accordion/demo/basic.tsx correctly 1`] = `
                         ]
                       }
                     >
-                      <View
+                      <Text
+                        numberOfLines={1}
                         style={
                           Object {
+                            "color": "#000000",
                             "flex": 1,
-                            "flexDirection": "column",
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
                           }
                         }
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            Object {
-                              "color": "#000000",
-                              "fontSize": 17,
-                              "textAlignVertical": "center",
-                            }
-                          }
-                        >
-                          Content 2
-                        </Text>
-                      </View>
+                        Content 2
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -300,38 +293,28 @@ exports[`renders ./components/accordion/demo/basic.tsx correctly 1`] = `
                         ]
                       }
                     >
-                      <View
+                      <Text
+                        numberOfLines={1}
                         style={
                           Object {
+                            "color": "#000000",
                             "flex": 1,
-                            "flexDirection": "column",
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
                           }
                         }
                       >
-                        <Text
-                          numberOfLines={1}
-                          style={
-                            Object {
-                              "color": "#000000",
-                              "fontSize": 17,
-                              "textAlignVertical": "center",
-                            }
-                          }
-                        >
-                          Content 3
-                        </Text>
-                      </View>
+                        Content 3
+                      </Text>
                     </View>
                   </View>
                 </View>
                 <View
                   style={
                     Object {
-                      "backgroundColor": "#ffffff",
-                      "borderBottomColor": "#dddddd",
-                      "borderBottomWidth": 0.5,
+                      "backgroundColor": "#eeeeee",
                       "bottom": 0,
-                      "height": 1,
+                      "height": 0.5,
                       "left": 0,
                       "position": "absolute",
                       "right": 0,
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
index 2785403a2..312672012 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
@@ -3,29 +3,35 @@
 exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
 <RCTScrollView>
   <View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          基本用法
-        </Text>
-      </View>
+        }
+      >
+        基本用法
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -155,6 +161,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   Array [
                     Object {
                       "backgroundColor": "transparent",
+                      "color": "#000000",
                       "marginLeft": 8,
                       "marginRight": 8,
                     },
@@ -181,17 +188,26 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   false,
                 ]
               }
-            />
+            >
+              <View
+                style={
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  }
+                }
+              />
+            </View>
           </View>
         </View>
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -200,29 +216,35 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          不可用
-        </Text>
-      </View>
+        }
+      >
+        不可用
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -356,6 +378,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   Array [
                     Object {
                       "backgroundColor": "transparent",
+                      "color": "#000000",
                       "marginLeft": 8,
                       "marginRight": 8,
                     },
@@ -383,7 +406,18 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   false,
                 ]
               }
-            />
+            >
+              <View
+                style={
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  }
+                }
+              />
+            </View>
           </View>
         </View>
         <View
@@ -519,6 +553,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   Array [
                     Object {
                       "backgroundColor": "transparent",
+                      "color": "#000000",
                       "marginLeft": 8,
                       "marginRight": 8,
                     },
@@ -546,17 +581,26 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   false,
                 ]
               }
-            />
+            >
+              <View
+                style={
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  }
+                }
+              />
+            </View>
           </View>
         </View>
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -565,29 +609,35 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          受控的Checkbox
-        </Text>
-      </View>
+        }
+      >
+        受控的Checkbox
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -721,6 +771,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   Array [
                     Object {
                       "backgroundColor": "transparent",
+                      "color": "#000000",
                       "marginLeft": 8,
                       "marginRight": 8,
                     },
@@ -747,17 +798,26 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   false,
                 ]
               }
-            />
+            >
+              <View
+                style={
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  }
+                }
+              />
+            </View>
           </View>
         </View>
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -765,202 +825,206 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
           }
         />
       </View>
-      <View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexWrap": "nowrap",
+              "justifyContent": "flex-start",
+            },
+            undefined,
+          ]
+        }
+      >
         <View
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "flexWrap": "nowrap",
-                "justifyContent": "flex-start",
+                "flex": 1,
+              },
+              Object {
+                "margin": 10,
               },
-              undefined,
             ]
           }
         >
           <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 23,
+                  "paddingLeft": 5,
+                  "paddingRight": 5,
                 },
                 Object {
-                  "margin": 10,
+                  "backgroundColor": "#108ee9",
+                  "borderColor": "#108ee9",
                 },
+                false,
+                false,
+                undefined,
+                undefined,
               ]
             }
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              style={
                 Object {
-                  "disabled": false,
+                  "flexDirection": "row",
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "borderRadius": 5,
-                    "borderWidth": 1,
-                    "justifyContent": "center",
-                  },
-                  Object {
-                    "height": 23,
-                    "paddingLeft": 5,
-                    "paddingRight": 5,
-                  },
-                  Object {
-                    "backgroundColor": "#108ee9",
-                    "borderColor": "#108ee9",
-                  },
-                  false,
-                  false,
-                  undefined,
-                  undefined,
-                ]
-              }
             >
-              <View
+              <Text
                 style={
-                  Object {
-                    "flexDirection": "row",
-                  }
+                  Array [
+                    Object {
+                      "fontSize": 12,
+                    },
+                    Object {
+                      "color": "#ffffff",
+                    },
+                    false,
+                    false,
+                  ]
                 }
               >
-                <Text
-                  style={
-                    Array [
-                      Object {
-                        "fontSize": 12,
-                      },
-                      Object {
-                        "color": "#ffffff",
-                      },
-                      false,
-                      false,
-                    ]
-                  }
-                >
-                  Uncheck
-                </Text>
-              </View>
+                Uncheck
+              </Text>
             </View>
           </View>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "flex": 1,
+              },
+              Object {
+                "margin": 10,
+              },
+            ]
+          }
+        >
           <View
+            accessibilityRole="button"
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               Array [
                 Object {
-                  "flex": 1,
+                  "alignItems": "center",
+                  "borderRadius": 5,
+                  "borderWidth": 1,
+                  "justifyContent": "center",
                 },
                 Object {
-                  "margin": 10,
+                  "height": 23,
+                  "paddingLeft": 5,
+                  "paddingRight": 5,
                 },
+                Object {
+                  "backgroundColor": "#108ee9",
+                  "borderColor": "#108ee9",
+                },
+                false,
+                false,
+                undefined,
+                undefined,
               ]
             }
           >
             <View
-              accessibilityRole="button"
-              accessibilityState={
+              style={
                 Object {
-                  "disabled": false,
+                  "flexDirection": "row",
                 }
               }
-              accessible={true}
-              focusable={true}
-              onClick={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "borderRadius": 5,
-                    "borderWidth": 1,
-                    "justifyContent": "center",
-                  },
-                  Object {
-                    "height": 23,
-                    "paddingLeft": 5,
-                    "paddingRight": 5,
-                  },
-                  Object {
-                    "backgroundColor": "#108ee9",
-                    "borderColor": "#108ee9",
-                  },
-                  false,
-                  false,
-                  undefined,
-                  undefined,
-                ]
-              }
             >
-              <View
+              <Text
                 style={
-                  Object {
-                    "flexDirection": "row",
-                  }
+                  Array [
+                    Object {
+                      "fontSize": 12,
+                    },
+                    Object {
+                      "color": "#ffffff",
+                    },
+                    false,
+                    false,
+                  ]
                 }
               >
-                <Text
-                  style={
-                    Array [
-                      Object {
-                        "fontSize": 12,
-                      },
-                      Object {
-                        "color": "#ffffff",
-                      },
-                      false,
-                      false,
-                    ]
-                  }
-                >
-                  Disable
-                </Text>
-              </View>
+                Disable
+              </Text>
             </View>
           </View>
         </View>
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          AgreeItem
-        </Text>
-      </View>
+        }
+      >
+        AgreeItem
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1065,6 +1129,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
               Array [
                 Object {
                   "backgroundColor": "transparent",
+                  "color": "#000000",
                   "marginLeft": 8,
                   "marginRight": 8,
                 },
@@ -1077,11 +1142,9 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1090,29 +1153,35 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          CheckboxItem
-        </Text>
-      </View>
+        }
+      >
+        CheckboxItem
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1253,6 +1322,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   Array [
                     Object {
                       "backgroundColor": "transparent",
+                      "color": "#000000",
                       "marginLeft": 8,
                       "marginRight": 8,
                     },
@@ -1280,10 +1350,14 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
             >
               <View
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                  ]
                 }
               >
                 <Text
@@ -1292,6 +1366,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                     Array [
                       Object {
                         "backgroundColor": "transparent",
+                        "color": "#000000",
                         "marginLeft": 8,
                         "marginRight": 8,
                       },
@@ -1437,6 +1512,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   Array [
                     Object {
                       "backgroundColor": "transparent",
+                      "color": "#000000",
                       "marginLeft": 8,
                       "marginRight": 8,
                     },
@@ -1464,10 +1540,14 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
             >
               <View
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                  ]
                 }
               >
                 <Text
@@ -1476,6 +1556,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                     Array [
                       Object {
                         "backgroundColor": "transparent",
+                        "color": "#000000",
                         "marginLeft": 8,
                         "marginRight": 8,
                       },
@@ -1621,6 +1702,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   Array [
                     Object {
                       "backgroundColor": "transparent",
+                      "color": "#000000",
                       "marginLeft": 8,
                       "marginRight": 8,
                     },
@@ -1648,10 +1730,14 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
             >
               <View
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                  ]
                 }
               >
                 <Text
@@ -1660,6 +1746,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                     Array [
                       Object {
                         "backgroundColor": "transparent",
+                        "color": "#000000",
                         "marginLeft": 8,
                         "marginRight": 8,
                       },
@@ -1727,10 +1814,14 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
             >
               <View
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                  ]
                 }
               >
                 <Text
@@ -1739,6 +1830,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                     Array [
                       Object {
                         "backgroundColor": "transparent",
+                        "color": "#000000",
                         "marginLeft": 8,
                         "marginRight": 8,
                       },
@@ -1752,116 +1844,135 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                 </Text>
               </View>
               <View
-                accessibilityRole="checkbox"
-                accessibilityState={
-                  Object {
-                    "checked": true,
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
                 checked={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                prefixCls="checkbox"
                 style={
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "display": "flex",
-                      "flexDirection": "row",
-                      "margin": 0,
-                      "padding": 0,
-                      "position": "relative",
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
                     },
                     undefined,
                   ]
                 }
               >
                 <View
-                  style={
+                  accessibilityRole="checkbox"
+                  accessibilityState={
                     Object {
-                      "height": 20,
-                      "overflow": "hidden",
-                      "padding": 2,
-                      "width": 20,
+                      "checked": true,
+                      "disabled": false,
                     }
                   }
+                  accessible={true}
+                  checked={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "margin": 0,
+                        "padding": 0,
+                        "position": "relative",
+                      },
+                      undefined,
+                    ]
+                  }
                 >
                   <View
                     style={
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "backgroundColor": "transparent",
-                          "borderColor": "#d9d9d9",
-                          "borderRadius": 2,
-                          "borderStyle": "solid",
-                          "borderWidth": 1,
-                          "height": "100%",
-                          "justifyContent": "center",
-                          "position": "relative",
-                          "width": "100%",
-                        },
-                        Object {
-                          "borderColor": "#108ee9",
-                        },
-                      ]
+                      Object {
+                        "height": 20,
+                        "overflow": "hidden",
+                        "padding": 2,
+                        "width": 20,
+                      }
                     }
                   >
                     <View
                       style={
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "height": "103%",
-                          "opacity": 0,
-                          "width": "103%",
-                        }
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "backgroundColor": "transparent",
+                            "borderColor": "#d9d9d9",
+                            "borderRadius": 2,
+                            "borderStyle": "solid",
+                            "borderWidth": 1,
+                            "height": "100%",
+                            "justifyContent": "center",
+                            "position": "relative",
+                            "width": "100%",
+                          },
+                          Object {
+                            "borderColor": "#108ee9",
+                          },
+                        ]
                       }
-                    />
-                    <View
-                      style={
-                        Object {
-                          "borderColor": "#ffffff",
-                          "borderLeftWidth": 0,
-                          "borderTopWidth": 0,
-                          "borderWidth": 2,
-                          "bottom": "20%",
-                          "height": 9,
-                          "position": "absolute",
-                          "transform": Array [
-                            Object {
-                              "rotate": "45deg",
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
-                          "width": 6,
+                    >
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "height": "103%",
+                            "opacity": 0,
+                            "width": "103%",
+                          }
                         }
-                      }
-                    />
+                      />
+                      <View
+                        style={
+                          Object {
+                            "borderColor": "#ffffff",
+                            "borderLeftWidth": 0,
+                            "borderTopWidth": 0,
+                            "borderWidth": 2,
+                            "bottom": "20%",
+                            "height": 9,
+                            "position": "absolute",
+                            "transform": Array [
+                              Object {
+                                "rotate": "45deg",
+                              },
+                              Object {
+                                "scale": 0,
+                              },
+                            ],
+                            "width": 6,
+                          }
+                        }
+                      />
+                    </View>
                   </View>
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "color": "#000000",
+                          "marginLeft": 8,
+                          "marginRight": 8,
+                        },
+                      ]
+                    }
+                  />
                 </View>
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "marginLeft": 8,
-                        "marginRight": 8,
-                      },
-                    ]
-                  }
-                />
               </View>
             </View>
           </View>
@@ -1869,11 +1980,9 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1882,30 +1991,36 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          全选
+        }
+      >
+        全选
 在实现全选效果时，你可能会用到 indeterminate 属性。
-        </Text>
-      </View>
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -2036,6 +2151,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                   Array [
                     Object {
                       "backgroundColor": "transparent",
+                      "color": "#000000",
                       "marginLeft": 8,
                       "marginRight": 8,
                     },
@@ -2063,10 +2179,14 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
             >
               <View
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                  ]
                 }
               >
                 <Text
@@ -2075,6 +2195,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                     Array [
                       Object {
                         "backgroundColor": "transparent",
+                        "color": "#000000",
                         "marginLeft": 8,
                         "marginRight": 8,
                       },
@@ -2235,6 +2356,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                     Array [
                       Object {
                         "backgroundColor": "transparent",
+                        "color": "#000000",
                         "marginLeft": 8,
                         "marginRight": 8,
                       },
@@ -2262,10 +2384,14 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
               >
                 <View
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    }
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "flex": 1,
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
+                      },
+                    ]
                   }
                 >
                   <Text
@@ -2274,6 +2400,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                       Array [
                         Object {
                           "backgroundColor": "transparent",
+                          "color": "#000000",
                           "marginLeft": 8,
                           "marginRight": 8,
                         },
@@ -2420,6 +2547,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                     Array [
                       Object {
                         "backgroundColor": "transparent",
+                        "color": "#000000",
                         "marginLeft": 8,
                         "marginRight": 8,
                       },
@@ -2447,10 +2575,14 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
               >
                 <View
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    }
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "flex": 1,
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
+                      },
+                    ]
                   }
                 >
                   <Text
@@ -2459,6 +2591,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                       Array [
                         Object {
                           "backgroundColor": "transparent",
+                          "color": "#000000",
                           "marginLeft": 8,
                           "marginRight": 8,
                         },
@@ -2608,6 +2741,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                     Array [
                       Object {
                         "backgroundColor": "transparent",
+                        "color": "#000000",
                         "marginLeft": 8,
                         "marginRight": 8,
                       },
@@ -2635,10 +2769,14 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
               >
                 <View
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    }
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "flex": 1,
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
+                      },
+                    ]
                   }
                 >
                   <Text
@@ -2647,6 +2785,7 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
                       Array [
                         Object {
                           "backgroundColor": "transparent",
+                          "color": "#000000",
                           "marginLeft": 8,
                           "marginRight": 8,
                         },
@@ -2663,11 +2802,9 @@ exports[`renders ./components/checkbox/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
index 3c63234c1..e5a34855d 100644
--- a/components/collapse/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
@@ -3,39 +3,54 @@
 exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
 <RCTScrollView>
   <View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          手风琴模式
-        </Text>
-      </View>
+        }
+      >
+        手风琴模式
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
-        <View>
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#f5f5f9",
+              },
+              undefined,
+            ]
+          }
+        >
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderTopColor": "#dddddd",
+                "borderTopColor": "#eeeeee",
                 "borderTopWidth": 0.5,
+                "position": "relative",
               }
             }
           >
@@ -82,48 +97,33 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    numberOfLines={1}
                     style={
                       Object {
+                        "color": "#000000",
                         "flex": 1,
-                        "flexDirection": "column",
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
                       }
                     }
                   >
-                    <Text
-                      numberOfLines={1}
-                      style={
+                    第一项
+                  </Text>
+                  <View
+                    active={false}
+                    style={
+                      Array [
                         Object {
-                          "color": "#000000",
+                          "color": "#888888",
                           "fontSize": 17,
+                          "maxWidth": "70%",
+                          "paddingLeft": 8,
+                          "textAlign": "right",
                           "textAlignVertical": "center",
-                        }
-                      }
-                    >
-                      第一项
-                    </Text>
-                  </View>
-                  <View
-                    animatedStyle={
-                      Object {
-                        "value": Object {
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                          ],
                         },
-                      }
-                    }
-                    collapsable={false}
-                    style={
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "rotate": "0deg",
-                          },
-                        ],
-                      }
+                        undefined,
+                      ]
                     }
                   >
                     <Text
@@ -216,48 +216,33 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    numberOfLines={1}
                     style={
                       Object {
+                        "color": "#000000",
                         "flex": 1,
-                        "flexDirection": "column",
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
                       }
                     }
                   >
-                    <Text
-                      numberOfLines={1}
-                      style={
+                    第二项
+                  </Text>
+                  <View
+                    active={false}
+                    style={
+                      Array [
                         Object {
-                          "color": "#000000",
+                          "color": "#888888",
                           "fontSize": 17,
+                          "maxWidth": "70%",
+                          "paddingLeft": 8,
+                          "textAlign": "right",
                           "textAlignVertical": "center",
-                        }
-                      }
-                    >
-                      第二项
-                    </Text>
-                  </View>
-                  <View
-                    animatedStyle={
-                      Object {
-                        "value": Object {
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                          ],
                         },
-                      }
-                    }
-                    collapsable={false}
-                    style={
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "rotate": "0deg",
-                          },
-                        ],
-                      }
+                        undefined,
+                      ]
                     }
                   >
                     <Text
@@ -350,48 +335,33 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    numberOfLines={1}
                     style={
                       Object {
+                        "color": "#000000",
                         "flex": 1,
-                        "flexDirection": "column",
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
                       }
                     }
                   >
-                    <Text
-                      numberOfLines={1}
-                      style={
+                    第三项
+                  </Text>
+                  <View
+                    active={false}
+                    style={
+                      Array [
                         Object {
-                          "color": "#000000",
+                          "color": "#888888",
                           "fontSize": 17,
+                          "maxWidth": "70%",
+                          "paddingLeft": 8,
+                          "textAlign": "right",
                           "textAlignVertical": "center",
-                        }
-                      }
-                    >
-                      第三项
-                    </Text>
-                  </View>
-                  <View
-                    animatedStyle={
-                      Object {
-                        "value": Object {
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                          ],
                         },
-                      }
-                    }
-                    collapsable={false}
-                    style={
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "rotate": "0deg",
-                          },
-                        ],
-                      }
+                        undefined,
+                      ]
                     }
                   >
                     <Text
@@ -444,11 +414,9 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
             <View
               style={
                 Object {
-                  "backgroundColor": "#ffffff",
-                  "borderBottomColor": "#dddddd",
-                  "borderBottomWidth": 0.5,
+                  "backgroundColor": "#eeeeee",
                   "bottom": 0,
-                  "height": 1,
+                  "height": 0.5,
                   "left": 0,
                   "position": "absolute",
                   "right": 0,
@@ -460,11 +428,9 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -473,39 +439,54 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          自定义折叠图标
-        </Text>
-      </View>
+        }
+      >
+        自定义折叠图标
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
-        <View>
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#f5f5f9",
+              },
+              undefined,
+            ]
+          }
+        >
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderTopColor": "#dddddd",
+                "borderTopColor": "#eeeeee",
                 "borderTopWidth": 0.5,
+                "position": "relative",
               }
             }
           >
@@ -552,43 +533,53 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    numberOfLines={1}
                     style={
                       Object {
+                        "color": "#000000",
                         "flex": 1,
-                        "flexDirection": "column",
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
                       }
                     }
                   >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "color": "#000000",
-                          "fontSize": 17,
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    >
-                      第一项
-                    </Text>
-                  </View>
-                  <Text
+                    第一项
+                  </Text>
+                  <View
+                    name="minus"
+                    size="md"
                     style={
                       Array [
                         Object {
-                          "color": "#cccccc",
-                          "fontFamily": "antoutline",
-                          "fontSize": 22,
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
+                          "color": "#888888",
+                          "fontSize": 17,
+                          "maxWidth": "70%",
+                          "paddingLeft": 8,
+                          "textAlign": "right",
+                          "textAlignVertical": "center",
                         },
                         undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
+                    <Text
+                      style={
+                        Array [
+                          Object {
+                            "color": "#cccccc",
+                            "fontFamily": "antoutline",
+                            "fontSize": 22,
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
                 </View>
               </View>
             </View>
@@ -661,32 +652,24 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                         ]
                       }
                     >
-                      <View
+                      <Text
                         style={
-                          Object {
-                            "flex": 1,
-                            "flexDirection": "column",
-                          }
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "textAlignVertical": "center",
+                            },
+                            Object {
+                              "color": "#999999",
+                              "fontSize": 13,
+                            },
+                          ]
                         }
                       >
-                        <Text
-                          style={
-                            Array [
-                              Object {
-                                "color": "#000000",
-                                "fontSize": 17,
-                                "textAlignVertical": "center",
-                              },
-                              Object {
-                                "color": "#999999",
-                                "fontSize": 13,
-                              },
-                            ]
-                          }
-                        >
-                          你可以通过 Collapse 的 arrow 属性来控制全部面板的箭头
-                        </Text>
-                      </View>
+                        你可以通过 Collapse 的 arrow 属性来控制全部面板的箭头
+                      </Text>
                     </View>
                   </View>
                 </View>
@@ -735,48 +718,33 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    numberOfLines={1}
                     style={
                       Object {
+                        "color": "#000000",
                         "flex": 1,
-                        "flexDirection": "column",
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
                       }
                     }
                   >
-                    <Text
-                      numberOfLines={1}
-                      style={
+                    第二项
+                  </Text>
+                  <View
+                    active={false}
+                    style={
+                      Array [
                         Object {
-                          "color": "#000000",
+                          "color": "#888888",
                           "fontSize": 17,
+                          "maxWidth": "70%",
+                          "paddingLeft": 8,
+                          "textAlign": "right",
                           "textAlignVertical": "center",
-                        }
-                      }
-                    >
-                      第二项
-                    </Text>
-                  </View>
-                  <View
-                    animatedStyle={
-                      Object {
-                        "value": Object {
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                          ],
                         },
-                      }
-                    }
-                    collapsable={false}
-                    style={
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "rotate": "0deg",
-                          },
-                        ],
-                      }
+                        undefined,
+                      ]
                     }
                   >
                     <Text
@@ -869,43 +837,53 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    numberOfLines={1}
                     style={
                       Object {
+                        "color": "#000000",
                         "flex": 1,
-                        "flexDirection": "column",
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
                       }
                     }
                   >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        Object {
-                          "color": "#000000",
-                          "fontSize": 17,
-                          "textAlignVertical": "center",
-                        }
-                      }
-                    >
-                      第三项
-                    </Text>
-                  </View>
-                  <Text
+                    第三项
+                  </Text>
+                  <View
+                    name="close-circle"
+                    size="md"
                     style={
                       Array [
                         Object {
-                          "color": "#cccccc",
-                          "fontFamily": "antoutline",
-                          "fontSize": 22,
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
+                          "color": "#888888",
+                          "fontSize": 17,
+                          "maxWidth": "70%",
+                          "paddingLeft": 8,
+                          "textAlign": "right",
+                          "textAlignVertical": "center",
                         },
                         undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
+                    <Text
+                      style={
+                        Array [
+                          Object {
+                            "color": "#cccccc",
+                            "fontFamily": "antoutline",
+                            "fontSize": 22,
+                            "fontStyle": "normal",
+                            "fontWeight": "normal",
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      
+                    </Text>
+                  </View>
                 </View>
               </View>
             </View>
@@ -939,11 +917,9 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
             <View
               style={
                 Object {
-                  "backgroundColor": "#ffffff",
-                  "borderBottomColor": "#dddddd",
-                  "borderBottomWidth": 0.5,
+                  "backgroundColor": "#eeeeee",
                   "bottom": 0,
-                  "height": 1,
+                  "height": 0.5,
                   "left": 0,
                   "position": "absolute",
                   "right": 0,
@@ -955,11 +931,9 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -968,39 +942,54 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          动态内容
-        </Text>
-      </View>
+        }
+      >
+        动态内容
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
-        <View>
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#f5f5f9",
+              },
+              undefined,
+            ]
+          }
+        >
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderTopColor": "#dddddd",
+                "borderTopColor": "#eeeeee",
                 "borderTopWidth": 0.5,
+                "position": "relative",
               }
             }
           >
@@ -1047,48 +1036,33 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    numberOfLines={1}
                     style={
                       Object {
+                        "color": "#000000",
                         "flex": 1,
-                        "flexDirection": "column",
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
                       }
                     }
                   >
-                    <Text
-                      numberOfLines={1}
-                      style={
+                    第一项
+                  </Text>
+                  <View
+                    active={false}
+                    style={
+                      Array [
                         Object {
-                          "color": "#000000",
+                          "color": "#888888",
                           "fontSize": 17,
+                          "maxWidth": "70%",
+                          "paddingLeft": 8,
+                          "textAlign": "right",
                           "textAlignVertical": "center",
-                        }
-                      }
-                    >
-                      第一项
-                    </Text>
-                  </View>
-                  <View
-                    animatedStyle={
-                      Object {
-                        "value": Object {
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                          ],
                         },
-                      }
-                    }
-                    collapsable={false}
-                    style={
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "rotate": "0deg",
-                          },
-                        ],
-                      }
+                        undefined,
+                      ]
                     }
                   >
                     <Text
@@ -1181,48 +1155,33 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                     ]
                   }
                 >
-                  <View
+                  <Text
+                    numberOfLines={1}
                     style={
                       Object {
+                        "color": "#000000",
                         "flex": 1,
-                        "flexDirection": "column",
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
                       }
                     }
                   >
-                    <Text
-                      numberOfLines={1}
-                      style={
+                    第二项
+                  </Text>
+                  <View
+                    active={false}
+                    style={
+                      Array [
                         Object {
-                          "color": "#000000",
+                          "color": "#888888",
                           "fontSize": 17,
+                          "maxWidth": "70%",
+                          "paddingLeft": 8,
+                          "textAlign": "right",
                           "textAlignVertical": "center",
-                        }
-                      }
-                    >
-                      第二项
-                    </Text>
-                  </View>
-                  <View
-                    animatedStyle={
-                      Object {
-                        "value": Object {
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                          ],
                         },
-                      }
-                    }
-                    collapsable={false}
-                    style={
-                      Object {
-                        "transform": Array [
-                          Object {
-                            "rotate": "0deg",
-                          },
-                        ],
-                      }
+                        undefined,
+                      ]
                     }
                   >
                     <Text
@@ -1315,11 +1274,23 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
                       }
                     >
                       <View
+                        message="预加载 forceRender={true}"
                         style={
-                          Object {
-                            "flex": 1,
-                            "flexDirection": "column",
-                          }
+                          Array [
+                            Array [
+                              Object {
+                                "color": "#000000",
+                                "flex": 1,
+                                "fontSize": 17,
+                                "textAlignVertical": "center",
+                              },
+                              Object {
+                                "color": "#999999",
+                                "fontSize": 13,
+                              },
+                            ],
+                            undefined,
+                          ]
                         }
                       >
                         <View
@@ -1347,11 +1318,9 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
             <View
               style={
                 Object {
-                  "backgroundColor": "#ffffff",
-                  "borderBottomColor": "#dddddd",
-                  "borderBottomWidth": 0.5,
+                  "backgroundColor": "#eeeeee",
                   "bottom": 0,
-                  "height": 1,
+                  "height": 0.5,
                   "left": 0,
                   "position": "absolute",
                   "right": 0,
@@ -1363,11 +1332,9 @@ exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
diff --git a/components/icon/__tests__/__snapshots__/demo.test.js.snap b/components/icon/__tests__/__snapshots__/demo.test.js.snap
index fe87478b7..c527a4bf2 100644
--- a/components/icon/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/icon/__tests__/__snapshots__/demo.test.js.snap
@@ -7,7 +7,7 @@ exports[`renders ./components/icon/demo/basic.tsx correctly 1`] = `
       style={
         Object {
           "alignItems": "center",
-          "backgroundColor": "#efeff4",
+          "backgroundColor": "#ffffff",
           "flexDirection": "row",
           "height": 44,
           "paddingLeft": 8,
@@ -34,11 +34,12 @@ exports[`renders ./components/icon/demo/basic.tsx correctly 1`] = `
           onSubmit={[Function]}
           onSubmitEditing={[Function]}
           placeholder="Search by icon name"
+          placeholderTextColor="#bbbbbb"
           rejectResponderTermination={true}
           style={
             Array [
               Object {
-                "backgroundColor": "#fff",
+                "backgroundColor": "#f7f7f7",
                 "borderColor": "#dddddd",
                 "borderRadius": 5,
                 "borderWidth": 0.5,
diff --git a/components/input-item/__tests__/__snapshots__/demo.test.js.snap b/components/input-item/__tests__/__snapshots__/demo.test.js.snap
index cd0ca702d..e361e012b 100644
--- a/components/input-item/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input-item/__tests__/__snapshots__/demo.test.js.snap
@@ -13,29 +13,35 @@ exports[`renders ./components/input-item/demo/basic.tsx correctly 1`] = `
   }
 >
   <View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          基本
-        </Text>
-      </View>
+        }
+      >
+        基本
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -587,91 +593,39 @@ exports[`renders ./components/input-item/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                disabled={false}
+                loading={false}
+                onHideUnderlay={[Function]}
+                onPress={[Function]}
+                onPressIn={[Function]}
+                onPressOut={[Function]}
+                onShowUnderlay={[Function]}
+                pressIn={false}
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
                 }
+                type="primary"
               >
-                <View
-                  accessibilityRole="button"
-                  accessibilityState={
-                    Object {
-                      "disabled": false,
-                    }
-                  }
-                  accessible={true}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
-                  style={
-                    Array [
-                      Object {
-                        "alignItems": "center",
-                        "borderRadius": 5,
-                        "borderWidth": 1,
-                        "justifyContent": "center",
-                      },
-                      Object {
-                        "height": 47,
-                        "paddingLeft": 15,
-                        "paddingRight": 15,
-                      },
-                      Object {
-                        "backgroundColor": "#108ee9",
-                        "borderColor": "#108ee9",
-                      },
-                      false,
-                      false,
-                      undefined,
-                      undefined,
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      Object {
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "fontSize": 18,
-                          },
-                          Object {
-                            "color": "#ffffff",
-                          },
-                          false,
-                          false,
-                        ]
-                      }
-                    >
-                      点击获取光标
-                    </Text>
-                  </View>
-                </View>
-              </View>
+                点击获取光标
+              </Text>
             </View>
           </View>
         </View>
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -680,29 +634,35 @@ exports[`renders ./components/input-item/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          固定标签字数
-        </Text>
-      </View>
+        }
+      >
+        固定标签字数
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -919,11 +879,9 @@ exports[`renders ./components/input-item/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -932,29 +890,35 @@ exports[`renders ./components/input-item/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          格式
-        </Text>
-      </View>
+        }
+      >
+        格式
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1352,11 +1316,9 @@ exports[`renders ./components/input-item/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
index 2911c0046..51f42bf39 100644
--- a/components/list/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -13,29 +13,35 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
   }
 >
   <View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          basic
-        </Text>
-      </View>
+        }
+      >
+        basic
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -82,27 +88,19 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#000000",
-                      "fontSize": 17,
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  标题文字点击无反馈，文字超长则隐藏，文字超长则隐藏
-                </Text>
-              </View>
+                标题文字点击无反馈，文字超长则隐藏，文字超长则隐藏
+              </Text>
             </View>
           </View>
         </View>
@@ -149,26 +147,18 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  style={
-                    Object {
-                      "color": "#000000",
-                      "fontSize": 17,
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
-                </Text>
-              </View>
+                文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
+              </Text>
             </View>
           </View>
         </View>
@@ -215,51 +205,34 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#000000",
-                      "fontSize": 17,
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  标题文字
-                </Text>
-              </View>
-              <View
+                标题文字
+              </Text>
+              <Text
+                numberOfLines={1}
                 style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    },
-                  ]
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#888888",
-                      "fontSize": 17,
-                      "textAlign": "right",
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  箭头向右
-                </Text>
-              </View>
+                箭头向右
+              </Text>
               <Text
                 style={
                   Array [
@@ -325,51 +298,34 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#000000",
-                      "fontSize": 17,
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  标题文字
-                </Text>
-              </View>
-              <View
+                标题文字
+              </Text>
+              <Text
+                numberOfLines={1}
                 style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    },
-                  ]
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#888888",
-                      "fontSize": 17,
-                      "textAlign": "right",
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  箭头向下
-                </Text>
-              </View>
+                箭头向下
+              </Text>
               <Text
                 style={
                   Array [
@@ -434,51 +390,34 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#000000",
-                      "fontSize": 17,
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  标题文字
-                </Text>
-              </View>
-              <View
+                标题文字
+              </Text>
+              <Text
+                numberOfLines={1}
                 style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    },
-                  ]
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#888888",
-                      "fontSize": 17,
-                      "textAlign": "right",
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  箭头向上
-                </Text>
-              </View>
+                箭头向上
+              </Text>
               <Text
                 style={
                   Array [
@@ -543,51 +482,34 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#000000",
-                      "fontSize": 17,
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  标题文字
-                </Text>
-              </View>
-              <View
+                标题文字
+              </Text>
+              <Text
+                numberOfLines={1}
                 style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    },
-                  ]
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#888888",
-                      "fontSize": 17,
-                      "textAlign": "right",
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  没有箭头
-                </Text>
-              </View>
+                没有箭头
+              </Text>
               <View
                 style={
                   Object {
@@ -644,41 +566,35 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                垂直居中对齐
+              </Text>
+              <View
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  垂直居中对齐
-                </Text>
-              </View>
-              <View>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#888888",
-                        "fontSize": 17,
-                        "textAlign": "right",
-                        "textAlignVertical": "center",
-                      },
-                    ]
-                  }
-                >
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <Text>
                   内容内容
                 </Text>
                 <View
@@ -760,21 +676,22 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
               <View
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
                 <Text
                   numberOfLines={1}
                   style={
-                    Array [
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      },
-                    ]
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    }
                   }
                 >
                   垂直居中对齐
@@ -805,30 +722,21 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                   </Text>
                 </View>
               </View>
-              <View
+              <Text
+                numberOfLines={1}
                 style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    },
-                  ]
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#888888",
-                      "fontSize": 17,
-                      "textAlign": "right",
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  内容内容
-                </Text>
-              </View>
+                内容内容
+              </Text>
             </View>
           </View>
         </View>
@@ -882,20 +790,21 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
               <View
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
                 <Text
                   style={
-                    Array [
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      },
-                    ]
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    }
                   }
                 >
                   顶部对齐
@@ -951,29 +860,20 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                   </Text>
                 </View>
               </View>
-              <View
+              <Text
                 style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    },
-                  ]
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  }
                 }
               >
-                <Text
-                  style={
-                    Object {
-                      "color": "#888888",
-                      "fontSize": 17,
-                      "textAlign": "right",
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
-                </Text>
-              </View>
+                文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行
+              </Text>
               <Text
                 style={
                   Array [
@@ -1043,41 +943,35 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                底部对齐
+              </Text>
+              <View
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  底部对齐
-                </Text>
-              </View>
-              <View>
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#888888",
-                        "fontSize": 17,
-                        "textAlign": "right",
-                        "textAlignVertical": "center",
-                      },
-                    ]
-                  }
-                >
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <Text>
                   内容内容
                 </Text>
                 <View
@@ -1114,11 +1008,9 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1127,29 +1019,35 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          带缩略图
-        </Text>
-      </View>
+        }
+      >
+        带缩略图
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1213,27 +1111,19 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#000000",
-                      "fontSize": 17,
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  thumb
-                </Text>
-              </View>
+                thumb
+              </Text>
             </View>
           </View>
         </View>
@@ -1297,27 +1187,19 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#000000",
-                      "fontSize": 17,
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  thumb
-                </Text>
-              </View>
+                thumb
+              </Text>
               <Text
                 style={
                   Array [
@@ -1383,40 +1265,56 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
-                    Object {
-                      "color": "#000000",
-                      "fontSize": 17,
-                      "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  extra为Image
-                </Text>
-              </View>
-              <Image
+                extra为Image
+              </Text>
+              <View
                 source={
                   Object {
                     "uri": "https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png",
                   }
                 }
                 style={
-                  Object {
-                    "height": 29,
-                    "width": 29,
-                  }
+                  Array [
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                    Object {
+                      "height": 29,
+                      "width": 29,
+                    },
+                  ]
                 }
-              />
+              >
+                <Image
+                  source={
+                    Object {
+                      "uri": "https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png",
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": 29,
+                      "width": 29,
+                    }
+                  }
+                />
+              </View>
               <Text
                 style={
                   Array [
@@ -1442,11 +1340,9 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
diff --git a/components/notice-bar/__tests__/__snapshots__/demo.test.js.snap b/components/notice-bar/__tests__/__snapshots__/demo.test.js.snap
index ebb874980..0361ac567 100644
--- a/components/notice-bar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/notice-bar/__tests__/__snapshots__/demo.test.js.snap
@@ -9,29 +9,35 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
   }
 >
   <View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          自定义颜色
-        </Text>
-      </View>
+        }
+      >
+        自定义颜色
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -432,11 +438,9 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -445,29 +449,35 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          可关闭
-        </Text>
-      </View>
+        }
+      >
+        可关闭
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -609,11 +619,9 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -622,29 +630,35 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          超长滚动
-        </Text>
-      </View>
+        }
+      >
+        超长滚动
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -889,11 +903,9 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -902,29 +914,35 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          自定义
-        </Text>
-      </View>
+        }
+      >
+        自定义
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1376,11 +1394,9 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1389,29 +1405,35 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          方向/播放/暂停控制
-        </Text>
-      </View>
+        }
+      >
+        方向/播放/暂停控制
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1586,115 +1608,125 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                Play
+              </Text>
+              <View
+                checked={true}
+                onChange={[Function]}
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  Play
-                </Text>
-              </View>
-              <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": false,
-                    "checked": true,
-                    "mergedDisabled": false,
-                  }
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#108ee9",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": true,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": undefined,
-                        "position": "absolute",
-                        "right": 11,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#108ee9",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
+                      ]
                     }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": undefined,
+                          "position": "absolute",
+                          "right": 11,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
-                    }
-                  />
+                    />
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -1743,115 +1775,125 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                AutoFill
+              </Text>
+              <View
+                checked={false}
+                onChange={[Function]}
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  AutoFill
-                </Text>
-              </View>
-              <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": false,
-                    "checked": false,
-                    "mergedDisabled": false,
-                  }
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#cccccc",
-                          "borderColor": "#cccccc",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": false,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": 2,
-                        "position": "absolute",
-                        "right": 0,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#cccccc",
+                            "borderColor": "#cccccc",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
+                      ]
                     }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": 2,
+                          "position": "absolute",
+                          "right": 0,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
-                    }
-                  />
+                    />
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -1900,117 +1942,129 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                Direction
+              </Text>
+              <View
+                checked={true}
+                checkedChildren="L"
+                onChange={[Function]}
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  Direction
-                </Text>
-              </View>
-              <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": false,
-                    "checked": true,
-                    "mergedDisabled": false,
-                  }
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                unCheckedChildren="R"
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#108ee9",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": true,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": undefined,
-                        "position": "absolute",
-                        "right": 11,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#108ee9",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
-                    }
-                  />
-                  <Text
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
-                      }
+                      ]
                     }
                   >
-                    L
-                  </Text>
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": undefined,
+                          "position": "absolute",
+                          "right": 11,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
+                      }
+                    />
+                    <Text
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    >
+                      L
+                    </Text>
+                  </View>
                 </View>
               </View>
             </View>
@@ -2062,8 +2116,10 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
               <View
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
@@ -2123,7 +2179,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#f5f5f9",
+                          "backgroundColor": "#f7f7f7",
                           "borderRadius": 3,
                           "height": 3,
                           "position": "absolute",
@@ -2163,7 +2219,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2184,7 +2240,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2205,7 +2261,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2226,7 +2282,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2247,7 +2303,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2268,7 +2324,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2287,7 +2343,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2306,7 +2362,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2325,7 +2381,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2344,7 +2400,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2363,7 +2419,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2396,11 +2452,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 32,
                           "elevation": 3,
-                          "height": 32,
-                          "marginLeft": -16,
                           "shadowColor": "#000000",
                           "shadowOffset": Object {
                             "height": 1,
@@ -2413,7 +2465,6 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                               "translateX": 0,
                             },
                           ],
-                          "width": 32,
                           "zIndex": 2,
                         }
                       }
@@ -2431,9 +2482,13 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
                           style={
                             Object {
                               "alignItems": "center",
+                              "backgroundColor": "#ffffff",
+                              "borderRadius": 32,
                               "flex": 1,
                               "flexDirection": "row",
+                              "height": 32,
                               "justifyContent": "center",
+                              "width": 32,
                             }
                           }
                         >
@@ -2493,11 +2548,9 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
diff --git a/components/picker/__tests__/__snapshots__/demo.test.js.snap b/components/picker/__tests__/__snapshots__/demo.test.js.snap
index f82671922..9c904fb8b 100644
--- a/components/picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/picker/__tests__/__snapshots__/demo.test.js.snap
@@ -2,22 +2,35 @@
 
 exports[`renders ./components/picker/demo/basic.tsx correctly 1`] = `
 <View>
-  <Text
+  <View
     style={
-      Object {
-        "margin": 16,
-      }
+      Array [
+        Object {
+          "backgroundColor": "#f5f5f9",
+        },
+        undefined,
+      ]
     }
   >
-    List Children
-  </Text>
-  <View>
+    <Text
+      style={
+        Object {
+          "color": "#888888",
+          "fontSize": 14,
+          "paddingBottom": 9,
+          "paddingHorizontal": 15,
+          "paddingTop": 15,
+        }
+      }
+    >
+      List Children
+    </Text>
     <View
       style={
         Object {
-          "backgroundColor": "#ffffff",
-          "borderTopColor": "#dddddd",
+          "borderTopColor": "#eeeeee",
           "borderTopWidth": 0.5,
+          "position": "relative",
         }
       }
     >
@@ -64,51 +77,34 @@ exports[`renders ./components/picker/demo/basic.tsx correctly 1`] = `
               ]
             }
           >
-            <View
+            <Text
+              numberOfLines={1}
               style={
                 Object {
+                  "color": "#000000",
                   "flex": 1,
-                  "flexDirection": "column",
+                  "fontSize": 17,
+                  "textAlignVertical": "center",
                 }
               }
             >
-              <Text
-                numberOfLines={1}
-                style={
-                  Object {
-                    "color": "#000000",
-                    "fontSize": 17,
-                    "textAlignVertical": "center",
-                  }
-                }
-              >
-                省市选择
-              </Text>
-            </View>
-            <View
+              省市选择
+            </Text>
+            <Text
+              numberOfLines={1}
               style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  },
-                ]
+                Object {
+                  "color": "#888888",
+                  "fontSize": 17,
+                  "maxWidth": "70%",
+                  "paddingLeft": 8,
+                  "textAlign": "right",
+                  "textAlignVertical": "center",
+                }
               }
             >
-              <Text
-                numberOfLines={1}
-                style={
-                  Object {
-                    "color": "#888888",
-                    "fontSize": 17,
-                    "textAlign": "right",
-                    "textAlignVertical": "center",
-                  }
-                }
-              >
-                请选择
-              </Text>
-            </View>
+              请选择
+            </Text>
             <Text
               style={
                 Array [
@@ -174,51 +170,34 @@ exports[`renders ./components/picker/demo/basic.tsx correctly 1`] = `
               ]
             }
           >
-            <View
+            <Text
+              numberOfLines={1}
               style={
                 Object {
+                  "color": "#000000",
                   "flex": 1,
-                  "flexDirection": "column",
+                  "fontSize": 17,
+                  "textAlignVertical": "center",
                 }
               }
             >
-              <Text
-                numberOfLines={1}
-                style={
-                  Object {
-                    "color": "#000000",
-                    "fontSize": 17,
-                    "textAlignVertical": "center",
-                  }
-                }
-              >
-                省市选择(异步加载)
-              </Text>
-            </View>
-            <View
+              省市选择(异步加载)
+            </Text>
+            <Text
+              numberOfLines={1}
               style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  },
-                ]
+                Object {
+                  "color": "#888888",
+                  "fontSize": 17,
+                  "maxWidth": "70%",
+                  "paddingLeft": 8,
+                  "textAlign": "right",
+                  "textAlignVertical": "center",
+                }
               }
             >
-              <Text
-                numberOfLines={1}
-                style={
-                  Object {
-                    "color": "#888888",
-                    "fontSize": 17,
-                    "textAlign": "right",
-                    "textAlignVertical": "center",
-                  }
-                }
-              >
-                请选择
-              </Text>
-            </View>
+              请选择
+            </Text>
             <Text
               style={
                 Array [
@@ -292,11 +271,9 @@ exports[`renders ./components/picker/demo/basic.tsx correctly 1`] = `
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderBottomColor": "#dddddd",
-            "borderBottomWidth": 0.5,
+            "backgroundColor": "#eeeeee",
             "bottom": 0,
-            "height": 1,
+            "height": 0.5,
             "left": 0,
             "position": "absolute",
             "right": 0,
@@ -305,94 +282,130 @@ exports[`renders ./components/picker/demo/basic.tsx correctly 1`] = `
       />
     </View>
   </View>
-  <Text
-    style={
-      Object {
-        "margin": 16,
-      }
-    }
-  >
-    visible 控制显示/隐藏
-  </Text>
   <View
     style={
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#fff",
-        "flexDirection": "row",
-        "paddingLeft": 16,
-        "paddingVertical": 5,
-      }
+      Array [
+        Object {
+          "backgroundColor": "#f5f5f9",
+        },
+        undefined,
+      ]
     }
   >
-    <View
-      accessibilityRole="button"
-      accessibilityState={
+    <Text
+      style={
         Object {
-          "disabled": false,
+          "color": "#888888",
+          "fontSize": 14,
+          "paddingBottom": 9,
+          "paddingHorizontal": 15,
+          "paddingTop": 15,
         }
       }
-      accessible={true}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
+    >
+      visible 控制显示/隐藏
+    </Text>
+    <View
       style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "borderRadius": 5,
-            "borderWidth": 1,
-            "justifyContent": "center",
-          },
-          Object {
-            "height": 47,
-            "paddingLeft": 15,
-            "paddingRight": 15,
-          },
-          Object {
-            "backgroundColor": "#108ee9",
-            "borderColor": "#108ee9",
-          },
-          false,
-          false,
-          undefined,
-          undefined,
-        ]
+        Object {
+          "borderTopColor": "#eeeeee",
+          "borderTopWidth": 0.5,
+          "position": "relative",
+        }
       }
     >
       <View
         style={
           Object {
+            "alignItems": "center",
             "flexDirection": "row",
+            "paddingLeft": 16,
+            "paddingVertical": 5,
           }
         }
       >
-        <Text
+        <View
+          accessibilityRole="button"
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             Array [
               Object {
-                "fontSize": 18,
+                "alignItems": "center",
+                "borderRadius": 5,
+                "borderWidth": 1,
+                "justifyContent": "center",
+              },
+              Object {
+                "height": 47,
+                "paddingLeft": 15,
+                "paddingRight": 15,
               },
               Object {
-                "color": "#ffffff",
+                "backgroundColor": "#108ee9",
+                "borderColor": "#108ee9",
               },
               false,
               false,
+              undefined,
+              undefined,
             ]
           }
         >
-          选择
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "fontSize": 18,
+                  },
+                  Object {
+                    "color": "#ffffff",
+                  },
+                  false,
+                  false,
+                ]
+              }
+            >
+              选择
+            </Text>
+          </View>
+        </View>
+        <Text>
+           未选择
         </Text>
       </View>
+      <View
+        style={
+          Object {
+            "backgroundColor": "#eeeeee",
+            "bottom": 0,
+            "height": 0.5,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+          }
+        }
+      />
     </View>
-    <Text>
-       未选择
-    </Text>
   </View>
 </View>
 `;
diff --git a/components/picker/__tests__/__snapshots__/index.test.js.snap b/components/picker/__tests__/__snapshots__/index.test.js.snap
index d251e421c..9ace3096b 100644
--- a/components/picker/__tests__/__snapshots__/index.test.js.snap
+++ b/components/picker/__tests__/__snapshots__/index.test.js.snap
@@ -111,6 +111,7 @@ Array [
             Array [
               Object {
                 "alignItems": "center",
+                "backgroundColor": "#ffffff",
                 "borderBottomColor": "#eeeeee",
                 "borderBottomWidth": 0.5,
                 "flexDirection": "row",
@@ -212,9 +213,13 @@ Array [
             style={
               Array [
                 Object {
-                  "height": "auto",
                   "justifyContent": "center",
+                  "minHeight": 34,
                   "overflow": "hidden",
+                  "paddingHorizontal": 5,
+                },
+                Object {
+                  "height": "auto",
                 },
               ]
             }
@@ -224,10 +229,9 @@ Array [
               style={
                 Array [
                   Object {
-                    "color": "#333",
+                    "color": "#000000",
                     "fontSize": 16,
                     "includeFontPadding": false,
-                    "padding": 8,
                     "textAlign": "center",
                   },
                   undefined,
diff --git a/components/popover/__tests__/__snapshots__/demo.test.js.snap b/components/popover/__tests__/__snapshots__/demo.test.js.snap
index 02146b1c5..c6fa26b24 100644
--- a/components/popover/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/popover/__tests__/__snapshots__/demo.test.js.snap
@@ -2,13 +2,22 @@
 
 exports[`renders ./components/popover/demo/basic.tsx correctly 1`] = `
 Array [
-  <View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#f5f5f9",
+        },
+        undefined,
+      ]
+    }
+  >
     <View
       style={
         Object {
-          "backgroundColor": "#ffffff",
-          "borderTopColor": "#dddddd",
+          "borderTopColor": "#eeeeee",
           "borderTopWidth": 0.5,
+          "position": "relative",
         }
       }
     >
@@ -57,284 +66,99 @@ Array [
           >
             <View
               style={
-                Object {
-                  "flex": 1,
-                  "flexDirection": "column",
-                }
+                Array [
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
               }
             >
-              <View>
-                <Text>
-                  选择了：
-                </Text>
-              </View>
+              <Text>
+                选择了：
+              </Text>
             </View>
-            <View>
-              <View
-                accessible={true}
-                focusable={true}
-                forwardedRef={[Function]}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                    "paddingHorizontal": 6,
-                  }
-                }
-              >
-                <Text>
-                  菜单
-                </Text>
-              </View>
-              <Modal
-                hardwareAccelerated={false}
-                onDismiss={[Function]}
-                onOrientationChange={[Function]}
-                onRequestClose={[Function]}
-                supportedOrientations={
-                  Array [
-                    "portrait",
-                    "landscape",
-                  ]
-                }
-                transparent={true}
-                visible={false}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      },
-                      false,
-                    ]
-                  }
-                >
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "left": 0,
-                        "position": "absolute",
-                        "shadowColor": "black",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.4,
-                        "shadowRadius": 2,
-                        "top": 0,
-                      }
-                    }
+            <View
+              onSelect={[Function]}
+              overlay={
+                Array [
+                  <PopoverItem
+                    value="option 1"
                   >
-                    <View
-                      onLayout={[Function]}
+                    <Text>
+                      option 
+                      1
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 2"
+                  >
+                    <Text>
+                      option 
+                      2
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 3"
+                  >
+                    <Text>
+                      option 
+                      3
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    disabled={true}
+                    value="disabled"
+                  >
+                    <Text
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 3,
-                          "elevation": 3,
-                          "flexDirection": "column",
-                          "padding": 0,
-                          "position": "absolute",
-                          "transform": Array [
-                            Object {
-                              "translateX": 0,
-                            },
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
+                          "color": "#ddd",
                         }
                       }
                     >
-                      <RCTScrollView>
-                        <View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              1
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              2
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              3
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                Object {
-                                  "color": "#ddd",
-                                }
-                              }
-                            >
-                              disabled opt
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "backgroundColor": "#efeff4",
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              关闭
-                            </Text>
-                          </View>
-                        </View>
-                      </RCTScrollView>
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "borderBottomColor": "transparent",
-                          "borderBottomWidth": 9,
-                          "borderEndWidth": 9,
-                          "borderLeftColor": "transparent",
-                          "borderRightColor": "transparent",
-                          "borderStartWidth": 9,
-                          "borderTopColor": "transparent",
-                          "borderTopWidth": 9,
-                          "height": 18,
-                          "left": -9,
-                          "position": "absolute",
-                          "top": -9,
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
-                          "width": 18,
-                        }
+                      disabled opt
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    style={
+                      Object {
+                        "backgroundColor": "#efeff4",
                       }
-                    />
-                  </View>
-                </View>
-              </Modal>
+                    }
+                    value="button ct"
+                  >
+                    <Text>
+                      关闭
+                    </Text>
+                  </PopoverItem>,
+                ]
+              }
+              style={
+                Array [
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
+              }
+              triggerStyle={
+                Object {
+                  "paddingHorizontal": 6,
+                }
+              }
+            >
+              <Text>
+                菜单
+              </Text>
             </View>
           </View>
         </View>
@@ -384,284 +208,99 @@ Array [
           >
             <View
               style={
-                Object {
-                  "flex": 1,
-                  "flexDirection": "column",
-                }
+                Array [
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
               }
             >
-              <View>
-                <Text>
-                  选择了：
-                </Text>
-              </View>
+              <Text>
+                选择了：
+              </Text>
             </View>
-            <View>
-              <View
-                accessible={true}
-                focusable={true}
-                forwardedRef={[Function]}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                    "paddingHorizontal": 6,
-                  }
-                }
-              >
-                <Text>
-                  菜单
-                </Text>
-              </View>
-              <Modal
-                hardwareAccelerated={false}
-                onDismiss={[Function]}
-                onOrientationChange={[Function]}
-                onRequestClose={[Function]}
-                supportedOrientations={
-                  Array [
-                    "portrait",
-                    "landscape",
-                  ]
-                }
-                transparent={true}
-                visible={false}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      },
-                      false,
-                    ]
-                  }
-                >
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "left": 0,
-                        "position": "absolute",
-                        "shadowColor": "black",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.4,
-                        "shadowRadius": 2,
-                        "top": 0,
-                      }
-                    }
+            <View
+              onSelect={[Function]}
+              overlay={
+                Array [
+                  <PopoverItem
+                    value="option 1"
+                  >
+                    <Text>
+                      option 
+                      1
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 2"
+                  >
+                    <Text>
+                      option 
+                      2
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 3"
+                  >
+                    <Text>
+                      option 
+                      3
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    disabled={true}
+                    value="disabled"
                   >
-                    <View
-                      onLayout={[Function]}
+                    <Text
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 3,
-                          "elevation": 3,
-                          "flexDirection": "column",
-                          "padding": 0,
-                          "position": "absolute",
-                          "transform": Array [
-                            Object {
-                              "translateX": 0,
-                            },
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
+                          "color": "#ddd",
                         }
                       }
                     >
-                      <RCTScrollView>
-                        <View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              1
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              2
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              3
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                Object {
-                                  "color": "#ddd",
-                                }
-                              }
-                            >
-                              disabled opt
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "backgroundColor": "#efeff4",
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              关闭
-                            </Text>
-                          </View>
-                        </View>
-                      </RCTScrollView>
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "borderBottomColor": "transparent",
-                          "borderBottomWidth": 9,
-                          "borderEndWidth": 9,
-                          "borderLeftColor": "transparent",
-                          "borderRightColor": "transparent",
-                          "borderStartWidth": 9,
-                          "borderTopColor": "transparent",
-                          "borderTopWidth": 9,
-                          "height": 18,
-                          "left": -9,
-                          "position": "absolute",
-                          "top": -9,
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
-                          "width": 18,
-                        }
+                      disabled opt
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    style={
+                      Object {
+                        "backgroundColor": "#efeff4",
                       }
-                    />
-                  </View>
-                </View>
-              </Modal>
+                    }
+                    value="button ct"
+                  >
+                    <Text>
+                      关闭
+                    </Text>
+                  </PopoverItem>,
+                ]
+              }
+              style={
+                Array [
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
+              }
+              triggerStyle={
+                Object {
+                  "paddingHorizontal": 6,
+                }
+              }
+            >
+              <Text>
+                菜单
+              </Text>
             </View>
           </View>
         </View>
@@ -711,284 +350,99 @@ Array [
           >
             <View
               style={
-                Object {
-                  "flex": 1,
-                  "flexDirection": "column",
-                }
+                Array [
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
               }
             >
-              <View>
-                <Text>
-                  选择了：
-                </Text>
-              </View>
+              <Text>
+                选择了：
+              </Text>
             </View>
-            <View>
-              <View
-                accessible={true}
-                focusable={true}
-                forwardedRef={[Function]}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                    "paddingHorizontal": 6,
-                  }
-                }
-              >
-                <Text>
-                  菜单
-                </Text>
-              </View>
-              <Modal
-                hardwareAccelerated={false}
-                onDismiss={[Function]}
-                onOrientationChange={[Function]}
-                onRequestClose={[Function]}
-                supportedOrientations={
-                  Array [
-                    "portrait",
-                    "landscape",
-                  ]
-                }
-                transparent={true}
-                visible={false}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      },
-                      false,
-                    ]
-                  }
-                >
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "left": 0,
-                        "position": "absolute",
-                        "shadowColor": "black",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.4,
-                        "shadowRadius": 2,
-                        "top": 0,
-                      }
-                    }
+            <View
+              onSelect={[Function]}
+              overlay={
+                Array [
+                  <PopoverItem
+                    value="option 1"
+                  >
+                    <Text>
+                      option 
+                      1
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 2"
+                  >
+                    <Text>
+                      option 
+                      2
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 3"
                   >
-                    <View
-                      onLayout={[Function]}
+                    <Text>
+                      option 
+                      3
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    disabled={true}
+                    value="disabled"
+                  >
+                    <Text
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 3,
-                          "elevation": 3,
-                          "flexDirection": "column",
-                          "padding": 0,
-                          "position": "absolute",
-                          "transform": Array [
-                            Object {
-                              "translateX": 0,
-                            },
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
+                          "color": "#ddd",
                         }
                       }
                     >
-                      <RCTScrollView>
-                        <View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              1
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              2
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              3
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                Object {
-                                  "color": "#ddd",
-                                }
-                              }
-                            >
-                              disabled opt
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "backgroundColor": "#efeff4",
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              关闭
-                            </Text>
-                          </View>
-                        </View>
-                      </RCTScrollView>
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "borderBottomColor": "transparent",
-                          "borderBottomWidth": 9,
-                          "borderEndWidth": 9,
-                          "borderLeftColor": "transparent",
-                          "borderRightColor": "transparent",
-                          "borderStartWidth": 9,
-                          "borderTopColor": "transparent",
-                          "borderTopWidth": 9,
-                          "height": 18,
-                          "left": -9,
-                          "position": "absolute",
-                          "top": -9,
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
-                          "width": 18,
-                        }
-                      }
-                    />
-                  </View>
-                </View>
-              </Modal>
+                      disabled opt
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    style={
+                      Object {
+                        "backgroundColor": "#efeff4",
+                      }
+                    }
+                    value="button ct"
+                  >
+                    <Text>
+                      关闭
+                    </Text>
+                  </PopoverItem>,
+                ]
+              }
+              style={
+                Array [
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
+              }
+              triggerStyle={
+                Object {
+                  "paddingHorizontal": 6,
+                }
+              }
+            >
+              <Text>
+                菜单
+              </Text>
             </View>
           </View>
         </View>
@@ -1038,284 +492,99 @@ Array [
           >
             <View
               style={
-                Object {
-                  "flex": 1,
-                  "flexDirection": "column",
-                }
+                Array [
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
               }
             >
-              <View>
-                <Text>
-                  选择了：
-                </Text>
-              </View>
+              <Text>
+                选择了：
+              </Text>
             </View>
-            <View>
-              <View
-                accessible={true}
-                focusable={true}
-                forwardedRef={[Function]}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                    "paddingHorizontal": 6,
-                  }
-                }
-              >
-                <Text>
-                  菜单
-                </Text>
-              </View>
-              <Modal
-                hardwareAccelerated={false}
-                onDismiss={[Function]}
-                onOrientationChange={[Function]}
-                onRequestClose={[Function]}
-                supportedOrientations={
-                  Array [
-                    "portrait",
-                    "landscape",
-                  ]
-                }
-                transparent={true}
-                visible={false}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      },
-                      false,
-                    ]
-                  }
-                >
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "left": 0,
-                        "position": "absolute",
-                        "shadowColor": "black",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.4,
-                        "shadowRadius": 2,
-                        "top": 0,
-                      }
-                    }
+            <View
+              onSelect={[Function]}
+              overlay={
+                Array [
+                  <PopoverItem
+                    value="option 1"
+                  >
+                    <Text>
+                      option 
+                      1
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 2"
                   >
-                    <View
-                      onLayout={[Function]}
+                    <Text>
+                      option 
+                      2
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 3"
+                  >
+                    <Text>
+                      option 
+                      3
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    disabled={true}
+                    value="disabled"
+                  >
+                    <Text
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 3,
-                          "elevation": 3,
-                          "flexDirection": "column",
-                          "padding": 0,
-                          "position": "absolute",
-                          "transform": Array [
-                            Object {
-                              "translateX": 0,
-                            },
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
+                          "color": "#ddd",
                         }
                       }
                     >
-                      <RCTScrollView>
-                        <View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              1
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              2
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              3
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                Object {
-                                  "color": "#ddd",
-                                }
-                              }
-                            >
-                              disabled opt
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "backgroundColor": "#efeff4",
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              关闭
-                            </Text>
-                          </View>
-                        </View>
-                      </RCTScrollView>
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "borderBottomColor": "transparent",
-                          "borderBottomWidth": 9,
-                          "borderEndWidth": 9,
-                          "borderLeftColor": "transparent",
-                          "borderRightColor": "transparent",
-                          "borderStartWidth": 9,
-                          "borderTopColor": "transparent",
-                          "borderTopWidth": 9,
-                          "height": 18,
-                          "left": -9,
-                          "position": "absolute",
-                          "top": -9,
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
-                          "width": 18,
-                        }
+                      disabled opt
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    style={
+                      Object {
+                        "backgroundColor": "#efeff4",
                       }
-                    />
-                  </View>
-                </View>
-              </Modal>
+                    }
+                    value="button ct"
+                  >
+                    <Text>
+                      关闭
+                    </Text>
+                  </PopoverItem>,
+                ]
+              }
+              style={
+                Array [
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
+              }
+              triggerStyle={
+                Object {
+                  "paddingHorizontal": 6,
+                }
+              }
+            >
+              <Text>
+                菜单
+              </Text>
             </View>
           </View>
         </View>
@@ -1365,284 +634,99 @@ Array [
           >
             <View
               style={
-                Object {
-                  "flex": 1,
-                  "flexDirection": "column",
-                }
+                Array [
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
               }
             >
-              <View>
-                <Text>
-                  选择了：
-                </Text>
-              </View>
+              <Text>
+                选择了：
+              </Text>
             </View>
-            <View>
-              <View
-                accessible={true}
-                focusable={true}
-                forwardedRef={[Function]}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                    "paddingHorizontal": 6,
-                  }
-                }
-              >
-                <Text>
-                  菜单
-                </Text>
-              </View>
-              <Modal
-                hardwareAccelerated={false}
-                onDismiss={[Function]}
-                onOrientationChange={[Function]}
-                onRequestClose={[Function]}
-                supportedOrientations={
-                  Array [
-                    "portrait",
-                    "landscape",
-                  ]
-                }
-                transparent={true}
-                visible={false}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      },
-                      false,
-                    ]
-                  }
-                >
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "left": 0,
-                        "position": "absolute",
-                        "shadowColor": "black",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.4,
-                        "shadowRadius": 2,
-                        "top": 0,
-                      }
-                    }
+            <View
+              onSelect={[Function]}
+              overlay={
+                Array [
+                  <PopoverItem
+                    value="option 1"
+                  >
+                    <Text>
+                      option 
+                      1
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 2"
+                  >
+                    <Text>
+                      option 
+                      2
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 3"
+                  >
+                    <Text>
+                      option 
+                      3
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    disabled={true}
+                    value="disabled"
                   >
-                    <View
-                      onLayout={[Function]}
+                    <Text
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 3,
-                          "elevation": 3,
-                          "flexDirection": "column",
-                          "padding": 0,
-                          "position": "absolute",
-                          "transform": Array [
-                            Object {
-                              "translateX": 0,
-                            },
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
+                          "color": "#ddd",
                         }
                       }
                     >
-                      <RCTScrollView>
-                        <View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              1
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              2
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              3
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                Object {
-                                  "color": "#ddd",
-                                }
-                              }
-                            >
-                              disabled opt
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "backgroundColor": "#efeff4",
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              关闭
-                            </Text>
-                          </View>
-                        </View>
-                      </RCTScrollView>
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "borderBottomColor": "transparent",
-                          "borderBottomWidth": 9,
-                          "borderEndWidth": 9,
-                          "borderLeftColor": "transparent",
-                          "borderRightColor": "transparent",
-                          "borderStartWidth": 9,
-                          "borderTopColor": "transparent",
-                          "borderTopWidth": 9,
-                          "height": 18,
-                          "left": -9,
-                          "position": "absolute",
-                          "top": -9,
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
-                          "width": 18,
-                        }
+                      disabled opt
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    style={
+                      Object {
+                        "backgroundColor": "#efeff4",
                       }
-                    />
-                  </View>
-                </View>
-              </Modal>
+                    }
+                    value="button ct"
+                  >
+                    <Text>
+                      关闭
+                    </Text>
+                  </PopoverItem>,
+                ]
+              }
+              style={
+                Array [
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
+              }
+              triggerStyle={
+                Object {
+                  "paddingHorizontal": 6,
+                }
+              }
+            >
+              <Text>
+                菜单
+              </Text>
             </View>
           </View>
         </View>
@@ -1692,284 +776,99 @@ Array [
           >
             <View
               style={
-                Object {
-                  "flex": 1,
-                  "flexDirection": "column",
-                }
+                Array [
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
               }
             >
-              <View>
-                <Text>
-                  选择了：
-                </Text>
-              </View>
+              <Text>
+                选择了：
+              </Text>
             </View>
-            <View>
-              <View
-                accessible={true}
-                focusable={true}
-                forwardedRef={[Function]}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                    "paddingHorizontal": 6,
-                  }
-                }
-              >
-                <Text>
-                  菜单
-                </Text>
-              </View>
-              <Modal
-                hardwareAccelerated={false}
-                onDismiss={[Function]}
-                onOrientationChange={[Function]}
-                onRequestClose={[Function]}
-                supportedOrientations={
-                  Array [
-                    "portrait",
-                    "landscape",
-                  ]
-                }
-                transparent={true}
-                visible={false}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      },
-                      false,
-                    ]
-                  }
-                >
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "left": 0,
-                        "position": "absolute",
-                        "shadowColor": "black",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.4,
-                        "shadowRadius": 2,
-                        "top": 0,
-                      }
-                    }
+            <View
+              onSelect={[Function]}
+              overlay={
+                Array [
+                  <PopoverItem
+                    value="option 1"
+                  >
+                    <Text>
+                      option 
+                      1
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 2"
+                  >
+                    <Text>
+                      option 
+                      2
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 3"
                   >
-                    <View
-                      onLayout={[Function]}
+                    <Text>
+                      option 
+                      3
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    disabled={true}
+                    value="disabled"
+                  >
+                    <Text
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 3,
-                          "elevation": 3,
-                          "flexDirection": "column",
-                          "padding": 0,
-                          "position": "absolute",
-                          "transform": Array [
-                            Object {
-                              "translateX": 0,
-                            },
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
+                          "color": "#ddd",
                         }
                       }
                     >
-                      <RCTScrollView>
-                        <View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              1
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              2
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              3
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                Object {
-                                  "color": "#ddd",
-                                }
-                              }
-                            >
-                              disabled opt
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "backgroundColor": "#efeff4",
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              关闭
-                            </Text>
-                          </View>
-                        </View>
-                      </RCTScrollView>
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "borderBottomColor": "transparent",
-                          "borderBottomWidth": 9,
-                          "borderEndWidth": 9,
-                          "borderLeftColor": "transparent",
-                          "borderRightColor": "transparent",
-                          "borderStartWidth": 9,
-                          "borderTopColor": "transparent",
-                          "borderTopWidth": 9,
-                          "height": 18,
-                          "left": -9,
-                          "position": "absolute",
-                          "top": -9,
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
-                          "width": 18,
-                        }
+                      disabled opt
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    style={
+                      Object {
+                        "backgroundColor": "#efeff4",
                       }
-                    />
-                  </View>
-                </View>
-              </Modal>
+                    }
+                    value="button ct"
+                  >
+                    <Text>
+                      关闭
+                    </Text>
+                  </PopoverItem>,
+                ]
+              }
+              style={
+                Array [
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
+              }
+              triggerStyle={
+                Object {
+                  "paddingHorizontal": 6,
+                }
+              }
+            >
+              <Text>
+                菜单
+              </Text>
             </View>
           </View>
         </View>
@@ -2019,284 +918,99 @@ Array [
           >
             <View
               style={
-                Object {
-                  "flex": 1,
-                  "flexDirection": "column",
-                }
+                Array [
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
               }
             >
-              <View>
-                <Text>
-                  选择了：
-                </Text>
-              </View>
+              <Text>
+                选择了：
+              </Text>
             </View>
-            <View>
-              <View
-                accessible={true}
-                focusable={true}
-                forwardedRef={[Function]}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                    "paddingHorizontal": 6,
-                  }
-                }
-              >
-                <Text>
-                  菜单
-                </Text>
-              </View>
-              <Modal
-                hardwareAccelerated={false}
-                onDismiss={[Function]}
-                onOrientationChange={[Function]}
-                onRequestClose={[Function]}
-                supportedOrientations={
-                  Array [
-                    "portrait",
-                    "landscape",
-                  ]
-                }
-                transparent={true}
-                visible={false}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      },
-                      false,
-                    ]
-                  }
-                >
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "left": 0,
-                        "position": "absolute",
-                        "shadowColor": "black",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.4,
-                        "shadowRadius": 2,
-                        "top": 0,
-                      }
-                    }
+            <View
+              onSelect={[Function]}
+              overlay={
+                Array [
+                  <PopoverItem
+                    value="option 1"
+                  >
+                    <Text>
+                      option 
+                      1
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 2"
+                  >
+                    <Text>
+                      option 
+                      2
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 3"
+                  >
+                    <Text>
+                      option 
+                      3
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    disabled={true}
+                    value="disabled"
                   >
-                    <View
-                      onLayout={[Function]}
+                    <Text
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 3,
-                          "elevation": 3,
-                          "flexDirection": "column",
-                          "padding": 0,
-                          "position": "absolute",
-                          "transform": Array [
-                            Object {
-                              "translateX": 0,
-                            },
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
+                          "color": "#ddd",
                         }
                       }
                     >
-                      <RCTScrollView>
-                        <View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              1
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              2
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              3
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                Object {
-                                  "color": "#ddd",
-                                }
-                              }
-                            >
-                              disabled opt
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "backgroundColor": "#efeff4",
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              关闭
-                            </Text>
-                          </View>
-                        </View>
-                      </RCTScrollView>
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "borderBottomColor": "transparent",
-                          "borderBottomWidth": 9,
-                          "borderEndWidth": 9,
-                          "borderLeftColor": "transparent",
-                          "borderRightColor": "transparent",
-                          "borderStartWidth": 9,
-                          "borderTopColor": "transparent",
-                          "borderTopWidth": 9,
-                          "height": 18,
-                          "left": -9,
-                          "position": "absolute",
-                          "top": -9,
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
-                          "width": 18,
-                        }
+                      disabled opt
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    style={
+                      Object {
+                        "backgroundColor": "#efeff4",
                       }
-                    />
-                  </View>
-                </View>
-              </Modal>
+                    }
+                    value="button ct"
+                  >
+                    <Text>
+                      关闭
+                    </Text>
+                  </PopoverItem>,
+                ]
+              }
+              style={
+                Array [
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
+              }
+              triggerStyle={
+                Object {
+                  "paddingHorizontal": 6,
+                }
+              }
+            >
+              <Text>
+                菜单
+              </Text>
             </View>
           </View>
         </View>
@@ -2346,284 +1060,99 @@ Array [
           >
             <View
               style={
-                Object {
-                  "flex": 1,
-                  "flexDirection": "column",
-                }
+                Array [
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
               }
             >
-              <View>
-                <Text>
-                  选择了：
-                </Text>
-              </View>
+              <Text>
+                选择了：
+              </Text>
             </View>
-            <View>
-              <View
-                accessible={true}
-                focusable={true}
-                forwardedRef={[Function]}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                    "paddingHorizontal": 6,
-                  }
-                }
-              >
-                <Text>
-                  菜单
-                </Text>
-              </View>
-              <Modal
-                hardwareAccelerated={false}
-                onDismiss={[Function]}
-                onOrientationChange={[Function]}
-                onRequestClose={[Function]}
-                supportedOrientations={
-                  Array [
-                    "portrait",
-                    "landscape",
-                  ]
-                }
-                transparent={true}
-                visible={false}
-              >
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      },
-                      false,
-                    ]
-                  }
-                >
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "bottom": 0,
-                        "left": 0,
-                        "opacity": 0,
-                        "position": "absolute",
-                        "right": 0,
-                        "top": 0,
-                      }
-                    }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "backgroundColor": "transparent",
-                        "left": 0,
-                        "position": "absolute",
-                        "shadowColor": "black",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.4,
-                        "shadowRadius": 2,
-                        "top": 0,
-                      }
-                    }
+            <View
+              onSelect={[Function]}
+              overlay={
+                Array [
+                  <PopoverItem
+                    value="option 1"
+                  >
+                    <Text>
+                      option 
+                      1
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 2"
+                  >
+                    <Text>
+                      option 
+                      2
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    value="option 3"
                   >
-                    <View
-                      onLayout={[Function]}
+                    <Text>
+                      option 
+                      3
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    disabled={true}
+                    value="disabled"
+                  >
+                    <Text
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 3,
-                          "elevation": 3,
-                          "flexDirection": "column",
-                          "padding": 0,
-                          "position": "absolute",
-                          "transform": Array [
-                            Object {
-                              "translateX": 0,
-                            },
-                            Object {
-                              "translateY": 0,
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
+                          "color": "#ddd",
                         }
                       }
                     >
-                      <RCTScrollView>
-                        <View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              1
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              2
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              option 
-                              3
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                Object {
-                                  "color": "#ddd",
-                                }
-                              }
-                            >
-                              disabled opt
-                            </Text>
-                          </View>
-                          <View
-                            accessible={true}
-                            focusable={true}
-                            onClick={[Function]}
-                            onResponderGrant={[Function]}
-                            onResponderMove={[Function]}
-                            onResponderRelease={[Function]}
-                            onResponderTerminate={[Function]}
-                            onResponderTerminationRequest={[Function]}
-                            onStartShouldSetResponder={[Function]}
-                            style={
-                              Object {
-                                "backgroundColor": "#efeff4",
-                                "opacity": 1,
-                                "padding": 9,
-                              }
-                            }
-                          >
-                            <Text>
-                              关闭
-                            </Text>
-                          </View>
-                        </View>
-                      </RCTScrollView>
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "borderBottomColor": "transparent",
-                          "borderBottomWidth": 9,
-                          "borderEndWidth": 9,
-                          "borderLeftColor": "transparent",
-                          "borderRightColor": "transparent",
-                          "borderStartWidth": 9,
-                          "borderTopColor": "transparent",
-                          "borderTopWidth": 9,
-                          "height": 18,
-                          "left": -9,
-                          "position": "absolute",
-                          "top": -9,
-                          "transform": Array [
-                            Object {
-                              "rotate": "0deg",
-                            },
-                            Object {
-                              "scale": 0,
-                            },
-                          ],
-                          "width": 18,
-                        }
+                      disabled opt
+                    </Text>
+                  </PopoverItem>,
+                  <PopoverItem
+                    style={
+                      Object {
+                        "backgroundColor": "#efeff4",
                       }
-                    />
-                  </View>
-                </View>
-              </Modal>
+                    }
+                    value="button ct"
+                  >
+                    <Text>
+                      关闭
+                    </Text>
+                  </PopoverItem>,
+                ]
+              }
+              style={
+                Array [
+                  Object {
+                    "color": "#888888",
+                    "fontSize": 17,
+                    "maxWidth": "70%",
+                    "paddingLeft": 8,
+                    "textAlign": "right",
+                    "textAlignVertical": "center",
+                  },
+                  undefined,
+                ]
+              }
+              triggerStyle={
+                Object {
+                  "paddingHorizontal": 6,
+                }
+              }
+            >
+              <Text>
+                菜单
+              </Text>
             </View>
           </View>
         </View>
@@ -2631,11 +1160,9 @@ Array [
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderBottomColor": "#dddddd",
-            "borderBottomWidth": 0.5,
+            "backgroundColor": "#eeeeee",
             "bottom": 0,
-            "height": 1,
+            "height": 0.5,
             "left": 0,
             "position": "absolute",
             "right": 0,
diff --git a/components/provider/__tests__/__snapshots__/demo.test.js.snap b/components/provider/__tests__/__snapshots__/demo.test.js.snap
index 769ad46de..152ba694f 100644
--- a/components/provider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/provider/__tests__/__snapshots__/demo.test.js.snap
@@ -55,51 +55,34 @@ exports[`renders ./components/provider/demo/basic.tsx correctly 1`] = `
           ]
         }
       >
-        <View
+        <Text
+          numberOfLines={1}
           style={
             Object {
+              "color": "#000000",
               "flex": 1,
-              "flexDirection": "column",
+              "fontSize": 17,
+              "textAlignVertical": "center",
             }
           }
         >
-          <Text
-            numberOfLines={1}
-            style={
-              Object {
-                "color": "#000000",
-                "fontSize": 17,
-                "textAlignVertical": "center",
-              }
-            }
-          >
-            Choose language
-          </Text>
-        </View>
-        <View
+          Choose language
+        </Text>
+        <Text
+          numberOfLines={1}
           style={
-            Array [
-              Object {
-                "flex": 1,
-                "flexDirection": "column",
-              },
-            ]
+            Object {
+              "color": "#888888",
+              "fontSize": 17,
+              "maxWidth": "70%",
+              "paddingLeft": 8,
+              "textAlign": "right",
+              "textAlignVertical": "center",
+            }
           }
         >
-          <Text
-            numberOfLines={1}
-            style={
-              Object {
-                "color": "#888888",
-                "fontSize": 17,
-                "textAlign": "right",
-                "textAlignVertical": "center",
-              }
-            }
-          >
-            请选择
-          </Text>
-        </View>
+          请选择
+        </Text>
         <Text
           style={
             Array [
@@ -386,17 +369,22 @@ exports[`renders ./components/provider/demo/basic.tsx correctly 1`] = `
       />
       <View
         style={
-          Object {
-            "backgroundColor": "white",
-          }
+          Array [
+            Object {
+              "backgroundColor": "#f5f5f9",
+            },
+            Object {
+              "backgroundColor": "white",
+            },
+          ]
         }
       >
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderTopColor": "#dddddd",
+              "borderTopColor": "#eeeeee",
               "borderTopWidth": 0.5,
+              "position": "relative",
             }
           }
         >
@@ -443,51 +431,34 @@ exports[`renders ./components/provider/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    DatePicker
-                  </Text>
-                </View>
-                <View
+                  DatePicker
+                </Text>
+                <Text
+                  numberOfLines={1}
                   style={
-                    Array [
-                      Object {
-                        "flex": 1,
-                        "flexDirection": "column",
-                      },
-                    ]
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#888888",
-                        "fontSize": 17,
-                        "textAlign": "right",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    please select
-                  </Text>
-                </View>
+                  please select
+                </Text>
                 <Text
                   style={
                     Array [
@@ -553,51 +524,34 @@ exports[`renders ./components/provider/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    Picker
-                  </Text>
-                </View>
-                <View
+                  Picker
+                </Text>
+                <Text
+                  numberOfLines={1}
                   style={
-                    Array [
-                      Object {
-                        "flex": 1,
-                        "flexDirection": "column",
-                      },
-                    ]
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#888888",
-                        "fontSize": 17,
-                        "textAlign": "right",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    please select
-                  </Text>
-                </View>
+                  please select
+                </Text>
                 <Text
                   style={
                     Array [
@@ -634,7 +588,7 @@ exports[`renders ./components/provider/demo/basic.tsx correctly 1`] = `
             style={
               Object {
                 "alignItems": "center",
-                "backgroundColor": "#efeff4",
+                "backgroundColor": "#ffffff",
                 "flexDirection": "row",
                 "height": 44,
                 "paddingLeft": 8,
@@ -661,11 +615,12 @@ exports[`renders ./components/provider/demo/basic.tsx correctly 1`] = `
                 onSubmit={[Function]}
                 onSubmitEditing={[Function]}
                 placeholder="Search"
+                placeholderTextColor="#bbbbbb"
                 rejectResponderTermination={true}
                 style={
                   Array [
                     Object {
-                      "backgroundColor": "#fff",
+                      "backgroundColor": "#f7f7f7",
                       "borderColor": "#dddddd",
                       "borderRadius": 5,
                       "borderWidth": 0.5,
@@ -733,11 +688,9 @@ exports[`renders ./components/provider/demo/basic.tsx correctly 1`] = `
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderBottomColor": "#dddddd",
-                "borderBottomWidth": 0.5,
+                "backgroundColor": "#eeeeee",
                 "bottom": 0,
-                "height": 1,
+                "height": 0.5,
                 "left": 0,
                 "position": "absolute",
                 "right": 0,
diff --git a/components/radio/__tests__/__snapshots__/demo.test.js.snap b/components/radio/__tests__/__snapshots__/demo.test.js.snap
index 5eda99dcb..bbf5a71ab 100644
--- a/components/radio/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/radio/__tests__/__snapshots__/demo.test.js.snap
@@ -3,29 +3,35 @@
 exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
 <RCTScrollView>
   <View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          基本用法
-        </Text>
-      </View>
+        }
+      >
+        基本用法
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -165,6 +171,7 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   Array [
                     Object {
                       "backgroundColor": "transparent",
+                      "color": "#000000",
                       "marginLeft": 8,
                       "marginRight": 8,
                     },
@@ -191,17 +198,26 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   false,
                 ]
               }
-            />
+            >
+              <View
+                style={
+                  Object {
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
+                  }
+                }
+              />
+            </View>
           </View>
         </View>
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -210,29 +226,35 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          不可用
-        </Text>
-      </View>
+        }
+      >
+        不可用
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -280,277 +302,274 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
+                align="center"
+                direction="row"
+                justify="start"
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
                 }
+                wrap="nowrap"
               >
                 <View
+                  accessibilityRole="radio"
+                  accessibilityState={
+                    Object {
+                      "checked": false,
+                      "disabled": false,
+                    }
+                  }
+                  accessible={true}
+                  checked={false}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                   style={
                     Array [
                       Object {
                         "alignItems": "center",
+                        "display": "flex",
                         "flexDirection": "row",
-                        "flexWrap": "nowrap",
-                        "justifyContent": "flex-start",
+                        "margin": 0,
+                        "padding": 0,
+                        "position": "relative",
                       },
                       undefined,
                     ]
                   }
                 >
                   <View
-                    accessibilityRole="radio"
-                    accessibilityState={
-                      Object {
-                        "checked": false,
-                        "disabled": false,
-                      }
-                    }
-                    accessible={true}
-                    checked={false}
-                    collapsable={false}
-                    focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       Array [
                         Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "margin": 0,
-                          "padding": 0,
-                          "position": "relative",
+                          "height": 20,
+                          "overflow": "hidden",
+                          "padding": 2,
+                          "width": 20,
+                        },
+                        Object {
+                          "borderRadius": 999,
                         },
-                        undefined,
                       ]
                     }
                   >
                     <View
                       style={
                         Array [
-                          Object {
-                            "height": 20,
-                            "overflow": "hidden",
-                            "padding": 2,
-                            "width": 20,
-                          },
-                          Object {
-                            "borderRadius": 999,
-                          },
+                          Array [
+                            Object {
+                              "alignItems": "center",
+                              "backgroundColor": "transparent",
+                              "borderColor": "#d9d9d9",
+                              "borderRadius": 2,
+                              "borderStyle": "solid",
+                              "borderWidth": 1,
+                              "height": "100%",
+                              "justifyContent": "center",
+                              "position": "relative",
+                              "width": "100%",
+                            },
+                            Object {
+                              "borderRadius": 999,
+                            },
+                          ],
                         ]
                       }
                     >
                       <View
                         style={
-                          Array [
-                            Array [
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "transparent",
-                                "borderColor": "#d9d9d9",
-                                "borderRadius": 2,
-                                "borderStyle": "solid",
-                                "borderWidth": 1,
-                                "height": "100%",
-                                "justifyContent": "center",
-                                "position": "relative",
-                                "width": "100%",
-                              },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "height": 0,
+                            "opacity": 0,
+                            "width": 0,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#ffffff",
+                            "borderLeftWidth": 0,
+                            "borderRadius": 999,
+                            "borderTopWidth": 0,
+                            "borderWidth": 0,
+                            "bottom": "20%",
+                            "height": 8,
+                            "position": "absolute",
+                            "transform": Array [
                               Object {
-                                "borderRadius": 999,
+                                "scale": 0,
                               },
                             ],
-                          ]
-                        }
-                      >
-                        <View
-                          style={
-                            Object {
-                              "backgroundColor": "#108ee9",
-                              "height": 0,
-                              "opacity": 0,
-                              "width": 0,
-                            }
-                          }
-                        />
-                        <View
-                          style={
-                            Object {
-                              "backgroundColor": "#108ee9",
-                              "borderColor": "#ffffff",
-                              "borderLeftWidth": 0,
-                              "borderRadius": 999,
-                              "borderTopWidth": 0,
-                              "borderWidth": 0,
-                              "bottom": "20%",
-                              "height": 8,
-                              "position": "absolute",
-                              "transform": Array [
-                                Object {
-                                  "scale": 0,
-                                },
-                              ],
-                              "width": 8,
-                            }
+                            "width": 8,
                           }
-                        />
-                      </View>
+                        }
+                      />
                     </View>
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "transparent",
-                            "marginLeft": 8,
-                            "marginRight": 8,
-                          },
-                        ]
-                      }
-                    >
-                      Disabled
-                    </Text>
                   </View>
-                  <View
+                  <Text
                     style={
                       Array [
                         Object {
-                          "marginLeft": 15,
-                          "marginRight": 15,
+                          "backgroundColor": "transparent",
+                          "color": "#000000",
+                          "marginLeft": 8,
+                          "marginRight": 8,
                         },
-                        undefined,
                       ]
                     }
-                  />
-                  <View
-                    accessibilityRole="radio"
-                    accessibilityState={
+                  >
+                    Disabled
+                  </Text>
+                </View>
+                <View
+                  style={
+                    Array [
                       Object {
-                        "checked": false,
-                        "disabled": false,
-                      }
+                        "marginLeft": 15,
+                        "marginRight": 15,
+                      },
+                      undefined,
+                    ]
+                  }
+                />
+                <View
+                  accessibilityRole="radio"
+                  accessibilityState={
+                    Object {
+                      "checked": false,
+                      "disabled": false,
                     }
-                    accessible={true}
-                    checked={false}
-                    collapsable={false}
-                    focusable={true}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "margin": 0,
-                          "padding": 0,
-                          "position": "relative",
+                  }
+                  accessible={true}
+                  checked={false}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    Array [
+                      Object {
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "margin": 0,
+                        "padding": 0,
+                        "position": "relative",
+                      },
+                      undefined,
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "height": 20,
+                          "overflow": "hidden",
+                          "padding": 2,
+                          "width": 20,
+                        },
+                        Object {
+                          "borderRadius": 999,
                         },
-                        undefined,
                       ]
                     }
                   >
                     <View
                       style={
                         Array [
-                          Object {
-                            "height": 20,
-                            "overflow": "hidden",
-                            "padding": 2,
-                            "width": 20,
-                          },
-                          Object {
-                            "borderRadius": 999,
-                          },
+                          Array [
+                            Object {
+                              "alignItems": "center",
+                              "backgroundColor": "transparent",
+                              "borderColor": "#d9d9d9",
+                              "borderRadius": 2,
+                              "borderStyle": "solid",
+                              "borderWidth": 1,
+                              "height": "100%",
+                              "justifyContent": "center",
+                              "position": "relative",
+                              "width": "100%",
+                            },
+                            Object {
+                              "borderRadius": 999,
+                            },
+                          ],
                         ]
                       }
                     >
                       <View
                         style={
-                          Array [
-                            Array [
-                              Object {
-                                "alignItems": "center",
-                                "backgroundColor": "transparent",
-                                "borderColor": "#d9d9d9",
-                                "borderRadius": 2,
-                                "borderStyle": "solid",
-                                "borderWidth": 1,
-                                "height": "100%",
-                                "justifyContent": "center",
-                                "position": "relative",
-                                "width": "100%",
-                              },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "height": 0,
+                            "opacity": 0,
+                            "width": 0,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#ffffff",
+                            "borderLeftWidth": 0,
+                            "borderRadius": 999,
+                            "borderTopWidth": 0,
+                            "borderWidth": 0,
+                            "bottom": "20%",
+                            "height": 8,
+                            "position": "absolute",
+                            "transform": Array [
                               Object {
-                                "borderRadius": 999,
+                                "scale": 0,
                               },
                             ],
-                          ]
-                        }
-                      >
-                        <View
-                          style={
-                            Object {
-                              "backgroundColor": "#108ee9",
-                              "height": 0,
-                              "opacity": 0,
-                              "width": 0,
-                            }
-                          }
-                        />
-                        <View
-                          style={
-                            Object {
-                              "backgroundColor": "#108ee9",
-                              "borderColor": "#ffffff",
-                              "borderLeftWidth": 0,
-                              "borderRadius": 999,
-                              "borderTopWidth": 0,
-                              "borderWidth": 0,
-                              "bottom": "20%",
-                              "height": 8,
-                              "position": "absolute",
-                              "transform": Array [
-                                Object {
-                                  "scale": 0,
-                                },
-                              ],
-                              "width": 8,
-                            }
+                            "width": 8,
                           }
-                        />
-                      </View>
+                        }
+                      />
                     </View>
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "transparent",
-                            "marginLeft": 8,
-                            "marginRight": 8,
-                          },
-                        ]
-                      }
-                    >
-                      Disabled
-                    </Text>
                   </View>
+                  <Text
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "color": "#000000",
+                          "marginLeft": 8,
+                          "marginRight": 8,
+                        },
+                      ]
+                    }
+                  >
+                    Disabled
+                  </Text>
                 </View>
               </View>
             </View>
@@ -559,11 +578,9 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -571,97 +588,101 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
           }
         />
       </View>
-      <View>
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 5,
+              "borderWidth": 1,
+              "justifyContent": "center",
+            },
+            Object {
+              "height": 47,
+              "paddingLeft": 15,
+              "paddingRight": 15,
+            },
+            Object {
+              "backgroundColor": "#108ee9",
+              "borderColor": "#108ee9",
+            },
+            false,
+            false,
+            undefined,
+            undefined,
+          ]
+        }
+      >
         <View
-          accessibilityRole="button"
-          accessibilityState={
+          style={
             Object {
-              "disabled": false,
+              "flexDirection": "row",
             }
           }
-          accessible={true}
-          focusable={true}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "borderRadius": 5,
-                "borderWidth": 1,
-                "justifyContent": "center",
-              },
-              Object {
-                "height": 47,
-                "paddingLeft": 15,
-                "paddingRight": 15,
-              },
-              Object {
-                "backgroundColor": "#108ee9",
-                "borderColor": "#108ee9",
-              },
-              false,
-              false,
-              undefined,
-              undefined,
-            ]
-          }
         >
-          <View
+          <Text
             style={
-              Object {
-                "flexDirection": "row",
-              }
+              Array [
+                Object {
+                  "fontSize": 18,
+                },
+                Object {
+                  "color": "#ffffff",
+                },
+                false,
+                false,
+              ]
             }
           >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "fontSize": 18,
-                  },
-                  Object {
-                    "color": "#ffffff",
-                  },
-                  false,
-                  false,
-                ]
-              }
-            >
-              Toggle disabled
-            </Text>
-          </View>
+            Toggle disabled
+          </Text>
         </View>
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          RadioItem
-        </Text>
-      </View>
+        }
+      >
+        RadioItem
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -717,10 +738,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
             >
               <View
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                  ]
                 }
               >
                 <Text
@@ -740,125 +765,144 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                 </Text>
               </View>
               <View
-                accessibilityRole="radio"
-                accessibilityState={
-                  Object {
-                    "checked": true,
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
                 checked={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                onChange={[Function]}
                 style={
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "display": "flex",
-                      "flexDirection": "row",
-                      "margin": 0,
-                      "padding": 0,
-                      "position": "relative",
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
                     },
                     undefined,
                   ]
                 }
               >
                 <View
+                  accessibilityRole="radio"
+                  accessibilityState={
+                    Object {
+                      "checked": true,
+                      "disabled": false,
+                    }
+                  }
+                  accessible={true}
+                  checked={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                   style={
                     Array [
                       Object {
-                        "height": 20,
-                        "overflow": "hidden",
-                        "padding": 2,
-                        "width": 20,
-                      },
-                      Object {
-                        "borderRadius": 999,
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "margin": 0,
+                        "padding": 0,
+                        "position": "relative",
                       },
+                      undefined,
                     ]
                   }
                 >
                   <View
                     style={
                       Array [
-                        Array [
-                          Object {
-                            "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "#d9d9d9",
-                            "borderRadius": 2,
-                            "borderStyle": "solid",
-                            "borderWidth": 1,
-                            "height": "100%",
-                            "justifyContent": "center",
-                            "position": "relative",
-                            "width": "100%",
-                          },
-                          Object {
-                            "borderRadius": 999,
-                          },
-                        ],
                         Object {
-                          "borderColor": "#108ee9",
+                          "height": 20,
+                          "overflow": "hidden",
+                          "padding": 2,
+                          "width": 20,
+                        },
+                        Object {
+                          "borderRadius": 999,
                         },
                       ]
                     }
                   >
                     <View
                       style={
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "height": 0,
-                          "opacity": 0,
-                          "width": 0,
-                        }
-                      }
-                    />
-                    <View
-                      style={
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#ffffff",
-                          "borderLeftWidth": 0,
-                          "borderRadius": 999,
-                          "borderTopWidth": 0,
-                          "borderWidth": 0,
-                          "bottom": "20%",
-                          "height": 8,
-                          "position": "absolute",
-                          "transform": Array [
+                        Array [
+                          Array [
                             Object {
-                              "scale": 0,
+                              "alignItems": "center",
+                              "backgroundColor": "transparent",
+                              "borderColor": "#d9d9d9",
+                              "borderRadius": 2,
+                              "borderStyle": "solid",
+                              "borderWidth": 1,
+                              "height": "100%",
+                              "justifyContent": "center",
+                              "position": "relative",
+                              "width": "100%",
+                            },
+                            Object {
+                              "borderRadius": 999,
                             },
                           ],
-                          "width": 8,
-                        }
+                          Object {
+                            "borderColor": "#108ee9",
+                          },
+                        ]
                       }
-                    />
+                    >
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "height": 0,
+                            "opacity": 0,
+                            "width": 0,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#ffffff",
+                            "borderLeftWidth": 0,
+                            "borderRadius": 999,
+                            "borderTopWidth": 0,
+                            "borderWidth": 0,
+                            "bottom": "20%",
+                            "height": 8,
+                            "position": "absolute",
+                            "transform": Array [
+                              Object {
+                                "scale": 0,
+                              },
+                            ],
+                            "width": 8,
+                          }
+                        }
+                      />
+                    </View>
                   </View>
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "color": "#000000",
+                          "marginLeft": 8,
+                          "marginRight": 8,
+                        },
+                      ]
+                    }
+                  />
                 </View>
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "marginLeft": 8,
-                        "marginRight": 8,
-                      },
-                    ]
-                  }
-                />
               </View>
             </View>
           </View>
@@ -915,10 +959,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
             >
               <View
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                  ]
                 }
               >
                 <Text
@@ -938,122 +986,141 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                 </Text>
               </View>
               <View
-                accessibilityRole="radio"
-                accessibilityState={
-                  Object {
-                    "checked": false,
-                    "disabled": false,
-                  }
-                }
-                accessible={true}
                 checked={false}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+                onChange={[Function]}
                 style={
                   Array [
                     Object {
-                      "alignItems": "center",
-                      "display": "flex",
-                      "flexDirection": "row",
-                      "margin": 0,
-                      "padding": 0,
-                      "position": "relative",
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
                     },
                     undefined,
                   ]
                 }
               >
                 <View
+                  accessibilityRole="radio"
+                  accessibilityState={
+                    Object {
+                      "checked": false,
+                      "disabled": false,
+                    }
+                  }
+                  accessible={true}
+                  checked={false}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                   style={
                     Array [
                       Object {
-                        "height": 20,
-                        "overflow": "hidden",
-                        "padding": 2,
-                        "width": 20,
-                      },
-                      Object {
-                        "borderRadius": 999,
+                        "alignItems": "center",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "margin": 0,
+                        "padding": 0,
+                        "position": "relative",
                       },
+                      undefined,
                     ]
                   }
                 >
                   <View
                     style={
                       Array [
+                        Object {
+                          "height": 20,
+                          "overflow": "hidden",
+                          "padding": 2,
+                          "width": 20,
+                        },
+                        Object {
+                          "borderRadius": 999,
+                        },
+                      ]
+                    }
+                  >
+                    <View
+                      style={
                         Array [
-                          Object {
-                            "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderColor": "#d9d9d9",
-                            "borderRadius": 2,
-                            "borderStyle": "solid",
-                            "borderWidth": 1,
-                            "height": "100%",
-                            "justifyContent": "center",
-                            "position": "relative",
-                            "width": "100%",
-                          },
-                          Object {
-                            "borderRadius": 999,
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    <View
-                      style={
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "height": 0,
-                          "opacity": 0,
-                          "width": 0,
-                        }
-                      }
-                    />
-                    <View
-                      style={
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#ffffff",
-                          "borderLeftWidth": 0,
-                          "borderRadius": 999,
-                          "borderTopWidth": 0,
-                          "borderWidth": 0,
-                          "bottom": "20%",
-                          "height": 8,
-                          "position": "absolute",
-                          "transform": Array [
+                          Array [
                             Object {
-                              "scale": 0,
+                              "alignItems": "center",
+                              "backgroundColor": "transparent",
+                              "borderColor": "#d9d9d9",
+                              "borderRadius": 2,
+                              "borderStyle": "solid",
+                              "borderWidth": 1,
+                              "height": "100%",
+                              "justifyContent": "center",
+                              "position": "relative",
+                              "width": "100%",
+                            },
+                            Object {
+                              "borderRadius": 999,
                             },
                           ],
-                          "width": 8,
-                        }
+                        ]
                       }
-                    />
+                    >
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "height": 0,
+                            "opacity": 0,
+                            "width": 0,
+                          }
+                        }
+                      />
+                      <View
+                        style={
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#ffffff",
+                            "borderLeftWidth": 0,
+                            "borderRadius": 999,
+                            "borderTopWidth": 0,
+                            "borderWidth": 0,
+                            "bottom": "20%",
+                            "height": 8,
+                            "position": "absolute",
+                            "transform": Array [
+                              Object {
+                                "scale": 0,
+                              },
+                            ],
+                            "width": 8,
+                          }
+                        }
+                      />
+                    </View>
                   </View>
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "color": "#000000",
+                          "marginLeft": 8,
+                          "marginRight": 8,
+                        },
+                      ]
+                    }
+                  />
                 </View>
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "backgroundColor": "transparent",
-                        "marginLeft": 8,
-                        "marginRight": 8,
-                      },
-                    ]
-                  }
-                />
               </View>
             </View>
           </View>
@@ -1061,11 +1128,9 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1074,30 +1139,36 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          单选组合 RadioGroup
+        }
+      >
+        单选组合 RadioGroup
 一组互斥的 Radio 配合使用
-        </Text>
-      </View>
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1230,6 +1301,7 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                 Array [
                   Object {
                     "backgroundColor": "transparent",
+                    "color": "#000000",
                     "marginLeft": 8,
                     "marginRight": 8,
                   },
@@ -1350,6 +1422,7 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                 Array [
                   Object {
                     "backgroundColor": "transparent",
+                    "color": "#000000",
                     "marginLeft": 8,
                     "marginRight": 8,
                   },
@@ -1470,6 +1543,7 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                 Array [
                   Object {
                     "backgroundColor": "transparent",
+                    "color": "#000000",
                     "marginLeft": 8,
                     "marginRight": 8,
                   },
@@ -1590,6 +1664,7 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                 Array [
                   Object {
                     "backgroundColor": "transparent",
+                    "color": "#000000",
                     "marginLeft": 8,
                     "marginRight": 8,
                   },
@@ -1603,11 +1678,9 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1616,30 +1689,36 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          Radio.Group 垂直
+        }
+      >
+        Radio.Group 垂直
 垂直的 Radio.Group，配合更多输入框选项
-        </Text>
-      </View>
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1703,10 +1782,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
               >
                 <View
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    }
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "flex": 1,
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
+                      },
+                    ]
                   }
                 >
                   <Text
@@ -1726,125 +1809,143 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   </Text>
                 </View>
                 <View
-                  accessibilityRole="radio"
-                  accessibilityState={
-                    Object {
-                      "checked": true,
-                      "disabled": false,
-                    }
-                  }
-                  accessible={true}
-                  checked={true}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
                   style={
                     Array [
                       Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexDirection": "row",
-                        "margin": 0,
-                        "padding": 0,
-                        "position": "relative",
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
                       },
                       undefined,
                     ]
                   }
+                  value={1}
                 >
                   <View
+                    accessibilityRole="radio"
+                    accessibilityState={
+                      Object {
+                        "checked": true,
+                        "disabled": false,
+                      }
+                    }
+                    accessible={true}
+                    checked={true}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       Array [
                         Object {
-                          "height": 20,
-                          "overflow": "hidden",
-                          "padding": 2,
-                          "width": 20,
-                        },
-                        Object {
-                          "borderRadius": 999,
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexDirection": "row",
+                          "margin": 0,
+                          "padding": 0,
+                          "position": "relative",
                         },
+                        undefined,
                       ]
                     }
                   >
                     <View
                       style={
                         Array [
-                          Array [
-                            Object {
-                              "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "#d9d9d9",
-                              "borderRadius": 2,
-                              "borderStyle": "solid",
-                              "borderWidth": 1,
-                              "height": "100%",
-                              "justifyContent": "center",
-                              "position": "relative",
-                              "width": "100%",
-                            },
-                            Object {
-                              "borderRadius": 999,
-                            },
-                          ],
                           Object {
-                            "borderColor": "#108ee9",
+                            "height": 20,
+                            "overflow": "hidden",
+                            "padding": 2,
+                            "width": 20,
+                          },
+                          Object {
+                            "borderRadius": 999,
                           },
                         ]
                       }
                     >
                       <View
                         style={
-                          Object {
-                            "backgroundColor": "#108ee9",
-                            "height": 0,
-                            "opacity": 0,
-                            "width": 0,
-                          }
-                        }
-                      />
-                      <View
-                        style={
-                          Object {
-                            "backgroundColor": "#108ee9",
-                            "borderColor": "#ffffff",
-                            "borderLeftWidth": 0,
-                            "borderRadius": 999,
-                            "borderTopWidth": 0,
-                            "borderWidth": 0,
-                            "bottom": "20%",
-                            "height": 8,
-                            "position": "absolute",
-                            "transform": Array [
+                          Array [
+                            Array [
                               Object {
-                                "scale": 0,
+                                "alignItems": "center",
+                                "backgroundColor": "transparent",
+                                "borderColor": "#d9d9d9",
+                                "borderRadius": 2,
+                                "borderStyle": "solid",
+                                "borderWidth": 1,
+                                "height": "100%",
+                                "justifyContent": "center",
+                                "position": "relative",
+                                "width": "100%",
+                              },
+                              Object {
+                                "borderRadius": 999,
                               },
                             ],
-                            "width": 8,
-                          }
+                            Object {
+                              "borderColor": "#108ee9",
+                            },
+                          ]
                         }
-                      />
+                      >
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "#108ee9",
+                              "height": 0,
+                              "opacity": 0,
+                              "width": 0,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "#108ee9",
+                              "borderColor": "#ffffff",
+                              "borderLeftWidth": 0,
+                              "borderRadius": 999,
+                              "borderTopWidth": 0,
+                              "borderWidth": 0,
+                              "bottom": "20%",
+                              "height": 8,
+                              "position": "absolute",
+                              "transform": Array [
+                                Object {
+                                  "scale": 0,
+                                },
+                              ],
+                              "width": 8,
+                            }
+                          }
+                        />
+                      </View>
                     </View>
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "color": "#000000",
+                            "marginLeft": 8,
+                            "marginRight": 8,
+                          },
+                        ]
+                      }
+                    />
                   </View>
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "marginLeft": 8,
-                          "marginRight": 8,
-                        },
-                      ]
-                    }
-                  />
                 </View>
               </View>
             </View>
@@ -1901,10 +2002,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
               >
                 <View
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    }
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "flex": 1,
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
+                      },
+                    ]
                   }
                 >
                   <Text
@@ -1924,122 +2029,140 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   </Text>
                 </View>
                 <View
-                  accessibilityRole="radio"
-                  accessibilityState={
-                    Object {
-                      "checked": false,
-                      "disabled": false,
-                    }
-                  }
-                  accessible={true}
-                  checked={false}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
                   style={
                     Array [
                       Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexDirection": "row",
-                        "margin": 0,
-                        "padding": 0,
-                        "position": "relative",
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
                       },
                       undefined,
                     ]
                   }
+                  value={2}
                 >
                   <View
+                    accessibilityRole="radio"
+                    accessibilityState={
+                      Object {
+                        "checked": false,
+                        "disabled": false,
+                      }
+                    }
+                    accessible={true}
+                    checked={false}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       Array [
                         Object {
-                          "height": 20,
-                          "overflow": "hidden",
-                          "padding": 2,
-                          "width": 20,
-                        },
-                        Object {
-                          "borderRadius": 999,
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexDirection": "row",
+                          "margin": 0,
+                          "padding": 0,
+                          "position": "relative",
                         },
+                        undefined,
                       ]
                     }
                   >
                     <View
                       style={
                         Array [
-                          Array [
-                            Object {
-                              "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "#d9d9d9",
-                              "borderRadius": 2,
-                              "borderStyle": "solid",
-                              "borderWidth": 1,
-                              "height": "100%",
-                              "justifyContent": "center",
-                              "position": "relative",
-                              "width": "100%",
-                            },
-                            Object {
-                              "borderRadius": 999,
-                            },
-                          ],
+                          Object {
+                            "height": 20,
+                            "overflow": "hidden",
+                            "padding": 2,
+                            "width": 20,
+                          },
+                          Object {
+                            "borderRadius": 999,
+                          },
                         ]
                       }
                     >
                       <View
                         style={
-                          Object {
-                            "backgroundColor": "#108ee9",
-                            "height": 0,
-                            "opacity": 0,
-                            "width": 0,
-                          }
-                        }
-                      />
-                      <View
-                        style={
-                          Object {
-                            "backgroundColor": "#108ee9",
-                            "borderColor": "#ffffff",
-                            "borderLeftWidth": 0,
-                            "borderRadius": 999,
-                            "borderTopWidth": 0,
-                            "borderWidth": 0,
-                            "bottom": "20%",
-                            "height": 8,
-                            "position": "absolute",
-                            "transform": Array [
+                          Array [
+                            Array [
                               Object {
-                                "scale": 0,
+                                "alignItems": "center",
+                                "backgroundColor": "transparent",
+                                "borderColor": "#d9d9d9",
+                                "borderRadius": 2,
+                                "borderStyle": "solid",
+                                "borderWidth": 1,
+                                "height": "100%",
+                                "justifyContent": "center",
+                                "position": "relative",
+                                "width": "100%",
+                              },
+                              Object {
+                                "borderRadius": 999,
                               },
                             ],
-                            "width": 8,
-                          }
+                          ]
                         }
-                      />
+                      >
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "#108ee9",
+                              "height": 0,
+                              "opacity": 0,
+                              "width": 0,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "#108ee9",
+                              "borderColor": "#ffffff",
+                              "borderLeftWidth": 0,
+                              "borderRadius": 999,
+                              "borderTopWidth": 0,
+                              "borderWidth": 0,
+                              "bottom": "20%",
+                              "height": 8,
+                              "position": "absolute",
+                              "transform": Array [
+                                Object {
+                                  "scale": 0,
+                                },
+                              ],
+                              "width": 8,
+                            }
+                          }
+                        />
+                      </View>
                     </View>
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "color": "#000000",
+                            "marginLeft": 8,
+                            "marginRight": 8,
+                          },
+                        ]
+                      }
+                    />
                   </View>
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "marginLeft": 8,
-                          "marginRight": 8,
-                        },
-                      ]
-                    }
-                  />
                 </View>
               </View>
             </View>
@@ -2096,10 +2219,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
               >
                 <View
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    }
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "flex": 1,
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
+                      },
+                    ]
                   }
                 >
                   <Text
@@ -2119,122 +2246,140 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   </Text>
                 </View>
                 <View
-                  accessibilityRole="radio"
-                  accessibilityState={
-                    Object {
-                      "checked": false,
-                      "disabled": false,
-                    }
-                  }
-                  accessible={true}
-                  checked={false}
-                  collapsable={false}
-                  focusable={true}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
                   style={
                     Array [
                       Object {
-                        "alignItems": "center",
-                        "display": "flex",
-                        "flexDirection": "row",
-                        "margin": 0,
-                        "padding": 0,
-                        "position": "relative",
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
                       },
                       undefined,
                     ]
                   }
+                  value={3}
                 >
                   <View
+                    accessibilityRole="radio"
+                    accessibilityState={
+                      Object {
+                        "checked": false,
+                        "disabled": false,
+                      }
+                    }
+                    accessible={true}
+                    checked={false}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       Array [
                         Object {
-                          "height": 20,
-                          "overflow": "hidden",
-                          "padding": 2,
-                          "width": 20,
-                        },
-                        Object {
-                          "borderRadius": 999,
+                          "alignItems": "center",
+                          "display": "flex",
+                          "flexDirection": "row",
+                          "margin": 0,
+                          "padding": 0,
+                          "position": "relative",
                         },
+                        undefined,
                       ]
                     }
                   >
                     <View
                       style={
                         Array [
-                          Array [
-                            Object {
-                              "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderColor": "#d9d9d9",
-                              "borderRadius": 2,
-                              "borderStyle": "solid",
-                              "borderWidth": 1,
-                              "height": "100%",
-                              "justifyContent": "center",
-                              "position": "relative",
-                              "width": "100%",
-                            },
-                            Object {
-                              "borderRadius": 999,
-                            },
-                          ],
+                          Object {
+                            "height": 20,
+                            "overflow": "hidden",
+                            "padding": 2,
+                            "width": 20,
+                          },
+                          Object {
+                            "borderRadius": 999,
+                          },
                         ]
                       }
                     >
                       <View
                         style={
-                          Object {
-                            "backgroundColor": "#108ee9",
-                            "height": 0,
-                            "opacity": 0,
-                            "width": 0,
-                          }
-                        }
-                      />
-                      <View
-                        style={
-                          Object {
-                            "backgroundColor": "#108ee9",
-                            "borderColor": "#ffffff",
-                            "borderLeftWidth": 0,
-                            "borderRadius": 999,
-                            "borderTopWidth": 0,
-                            "borderWidth": 0,
-                            "bottom": "20%",
-                            "height": 8,
-                            "position": "absolute",
-                            "transform": Array [
+                          Array [
+                            Array [
+                              Object {
+                                "alignItems": "center",
+                                "backgroundColor": "transparent",
+                                "borderColor": "#d9d9d9",
+                                "borderRadius": 2,
+                                "borderStyle": "solid",
+                                "borderWidth": 1,
+                                "height": "100%",
+                                "justifyContent": "center",
+                                "position": "relative",
+                                "width": "100%",
+                              },
                               Object {
-                                "scale": 0,
+                                "borderRadius": 999,
                               },
                             ],
-                            "width": 8,
-                          }
+                          ]
                         }
-                      />
+                      >
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "#108ee9",
+                              "height": 0,
+                              "opacity": 0,
+                              "width": 0,
+                            }
+                          }
+                        />
+                        <View
+                          style={
+                            Object {
+                              "backgroundColor": "#108ee9",
+                              "borderColor": "#ffffff",
+                              "borderLeftWidth": 0,
+                              "borderRadius": 999,
+                              "borderTopWidth": 0,
+                              "borderWidth": 0,
+                              "bottom": "20%",
+                              "height": 8,
+                              "position": "absolute",
+                              "transform": Array [
+                                Object {
+                                  "scale": 0,
+                                },
+                              ],
+                              "width": 8,
+                            }
+                          }
+                        />
+                      </View>
                     </View>
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "backgroundColor": "transparent",
+                            "color": "#000000",
+                            "marginLeft": 8,
+                            "marginRight": 8,
+                          },
+                        ]
+                      }
+                    />
                   </View>
-                  <View
-                    style={
-                      Array [
-                        Object {
-                          "backgroundColor": "transparent",
-                          "marginLeft": 8,
-                          "marginRight": 8,
-                        },
-                      ]
-                    }
-                  />
                 </View>
               </View>
             </View>
@@ -2382,6 +2527,7 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                     Array [
                       Object {
                         "backgroundColor": "transparent",
+                        "color": "#000000",
                         "marginLeft": 8,
                         "marginRight": 8,
                       },
@@ -2409,10 +2555,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
               >
                 <View
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    }
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "flex": 1,
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
+                      },
+                    ]
                   }
                 >
                   <Text
@@ -2438,11 +2588,9 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -2451,56 +2599,68 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          Radio.Group 组合 - 配置方式
+        }
+      >
+        Radio.Group 组合 - 配置方式
 可通过配置 options 参数来渲染单选框。
-        </Text>
-      </View>
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
-        <View>
-          <View>
-            <Text
-              style={
-                Object {
-                  "backgroundColor": "#f5f5f9",
-                  "color": "#888888",
-                  "fontSize": 14,
-                  "paddingBottom": 9,
-                  "paddingHorizontal": 15,
-                  "paddingTop": 15,
-                }
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#f5f5f9",
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            style={
+              Object {
+                "color": "#888888",
+                "fontSize": 14,
+                "paddingBottom": 9,
+                "paddingHorizontal": 15,
+                "paddingTop": 15,
               }
-            >
-              PlainOptions
-            </Text>
-          </View>
+            }
+          >
+            PlainOptions
+          </Text>
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderTopColor": "#dddddd",
+                "borderTopColor": "#eeeeee",
                 "borderTopWidth": 0.5,
+                "position": "relative",
               }
             }
           >
@@ -2564,10 +2724,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   >
                     <View
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                        ]
                       }
                     >
                       <Text
@@ -2587,125 +2751,144 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                       </Text>
                     </View>
                     <View
-                      accessibilityRole="radio"
-                      accessibilityState={
-                        Object {
-                          "checked": true,
-                          "disabled": false,
-                        }
-                      }
-                      accessible={true}
                       checked={true}
-                      collapsable={false}
-                      focusable={true}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "display": "flex",
-                            "flexDirection": "row",
-                            "margin": 0,
-                            "padding": 0,
-                            "position": "relative",
+                            "color": "#888888",
+                            "fontSize": 17,
+                            "maxWidth": "70%",
+                            "paddingLeft": 8,
+                            "textAlign": "right",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ]
                       }
+                      value="Apple"
                     >
                       <View
+                        accessibilityRole="radio"
+                        accessibilityState={
+                          Object {
+                            "checked": true,
+                            "disabled": false,
+                          }
+                        }
+                        accessible={true}
+                        checked={true}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "height": 20,
-                              "overflow": "hidden",
-                              "padding": 2,
-                              "width": 20,
-                            },
-                            Object {
-                              "borderRadius": 999,
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "row",
+                              "margin": 0,
+                              "padding": 0,
+                              "position": "relative",
                             },
+                            undefined,
                           ]
                         }
                       >
                         <View
                           style={
                             Array [
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "transparent",
-                                  "borderColor": "#d9d9d9",
-                                  "borderRadius": 2,
-                                  "borderStyle": "solid",
-                                  "borderWidth": 1,
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                  "position": "relative",
-                                  "width": "100%",
-                                },
-                                Object {
-                                  "borderRadius": 999,
-                                },
-                              ],
                               Object {
-                                "borderColor": "#108ee9",
+                                "height": 20,
+                                "overflow": "hidden",
+                                "padding": 2,
+                                "width": 20,
+                              },
+                              Object {
+                                "borderRadius": 999,
                               },
                             ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "height": 0,
-                                "opacity": 0,
-                                "width": 0,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "borderColor": "#ffffff",
-                                "borderLeftWidth": 0,
-                                "borderRadius": 999,
-                                "borderTopWidth": 0,
-                                "borderWidth": 0,
-                                "bottom": "20%",
-                                "height": 8,
-                                "position": "absolute",
-                                "transform": Array [
+                              Array [
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#d9d9d9",
+                                    "borderRadius": 2,
+                                    "borderStyle": "solid",
+                                    "borderWidth": 1,
+                                    "height": "100%",
+                                    "justifyContent": "center",
+                                    "position": "relative",
+                                    "width": "100%",
+                                  },
                                   Object {
-                                    "scale": 0,
+                                    "borderRadius": 999,
                                   },
                                 ],
-                                "width": 8,
-                              }
+                                Object {
+                                  "borderColor": "#108ee9",
+                                },
+                              ]
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "height": 0,
+                                  "opacity": 0,
+                                  "width": 0,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "borderColor": "#ffffff",
+                                  "borderLeftWidth": 0,
+                                  "borderRadius": 999,
+                                  "borderTopWidth": 0,
+                                  "borderWidth": 0,
+                                  "bottom": "20%",
+                                  "height": 8,
+                                  "position": "absolute",
+                                  "transform": Array [
+                                    Object {
+                                      "scale": 0,
+                                    },
+                                  ],
+                                  "width": 8,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#000000",
+                                "marginLeft": 8,
+                                "marginRight": 8,
+                              },
+                            ]
+                          }
+                        />
                       </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "marginLeft": 8,
-                              "marginRight": 8,
-                            },
-                          ]
-                        }
-                      />
                     </View>
                   </View>
                 </View>
@@ -2762,10 +2945,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   >
                     <View
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                        ]
                       }
                     >
                       <Text
@@ -2785,122 +2972,141 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                       </Text>
                     </View>
                     <View
-                      accessibilityRole="radio"
-                      accessibilityState={
-                        Object {
-                          "checked": false,
-                          "disabled": false,
-                        }
-                      }
-                      accessible={true}
                       checked={false}
-                      collapsable={false}
-                      focusable={true}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "display": "flex",
-                            "flexDirection": "row",
-                            "margin": 0,
-                            "padding": 0,
-                            "position": "relative",
+                            "color": "#888888",
+                            "fontSize": 17,
+                            "maxWidth": "70%",
+                            "paddingLeft": 8,
+                            "textAlign": "right",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ]
                       }
+                      value="Pear"
                     >
                       <View
+                        accessibilityRole="radio"
+                        accessibilityState={
+                          Object {
+                            "checked": false,
+                            "disabled": false,
+                          }
+                        }
+                        accessible={true}
+                        checked={false}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "height": 20,
-                              "overflow": "hidden",
-                              "padding": 2,
-                              "width": 20,
-                            },
-                            Object {
-                              "borderRadius": 999,
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "row",
+                              "margin": 0,
+                              "padding": 0,
+                              "position": "relative",
                             },
+                            undefined,
                           ]
                         }
                       >
                         <View
                           style={
                             Array [
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "transparent",
-                                  "borderColor": "#d9d9d9",
-                                  "borderRadius": 2,
-                                  "borderStyle": "solid",
-                                  "borderWidth": 1,
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                  "position": "relative",
-                                  "width": "100%",
-                                },
-                                Object {
-                                  "borderRadius": 999,
-                                },
-                              ],
+                              Object {
+                                "height": 20,
+                                "overflow": "hidden",
+                                "padding": 2,
+                                "width": 20,
+                              },
+                              Object {
+                                "borderRadius": 999,
+                              },
                             ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "height": 0,
-                                "opacity": 0,
-                                "width": 0,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "borderColor": "#ffffff",
-                                "borderLeftWidth": 0,
-                                "borderRadius": 999,
-                                "borderTopWidth": 0,
-                                "borderWidth": 0,
-                                "bottom": "20%",
-                                "height": 8,
-                                "position": "absolute",
-                                "transform": Array [
+                              Array [
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#d9d9d9",
+                                    "borderRadius": 2,
+                                    "borderStyle": "solid",
+                                    "borderWidth": 1,
+                                    "height": "100%",
+                                    "justifyContent": "center",
+                                    "position": "relative",
+                                    "width": "100%",
+                                  },
                                   Object {
-                                    "scale": 0,
+                                    "borderRadius": 999,
                                   },
                                 ],
-                                "width": 8,
-                              }
+                              ]
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "height": 0,
+                                  "opacity": 0,
+                                  "width": 0,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "borderColor": "#ffffff",
+                                  "borderLeftWidth": 0,
+                                  "borderRadius": 999,
+                                  "borderTopWidth": 0,
+                                  "borderWidth": 0,
+                                  "bottom": "20%",
+                                  "height": 8,
+                                  "position": "absolute",
+                                  "transform": Array [
+                                    Object {
+                                      "scale": 0,
+                                    },
+                                  ],
+                                  "width": 8,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#000000",
+                                "marginLeft": 8,
+                                "marginRight": 8,
+                              },
+                            ]
+                          }
+                        />
                       </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "marginLeft": 8,
-                              "marginRight": 8,
-                            },
-                          ]
-                        }
-                      />
                     </View>
                   </View>
                 </View>
@@ -2957,10 +3163,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   >
                     <View
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                        ]
                       }
                     >
                       <Text
@@ -2979,123 +3189,142 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                         Orange
                       </Text>
                     </View>
-                    <View
-                      accessibilityRole="radio"
-                      accessibilityState={
-                        Object {
-                          "checked": false,
-                          "disabled": false,
-                        }
-                      }
-                      accessible={true}
+                    <View
                       checked={false}
-                      collapsable={false}
-                      focusable={true}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "display": "flex",
-                            "flexDirection": "row",
-                            "margin": 0,
-                            "padding": 0,
-                            "position": "relative",
+                            "color": "#888888",
+                            "fontSize": 17,
+                            "maxWidth": "70%",
+                            "paddingLeft": 8,
+                            "textAlign": "right",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ]
                       }
+                      value="Orange"
                     >
                       <View
+                        accessibilityRole="radio"
+                        accessibilityState={
+                          Object {
+                            "checked": false,
+                            "disabled": false,
+                          }
+                        }
+                        accessible={true}
+                        checked={false}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "height": 20,
-                              "overflow": "hidden",
-                              "padding": 2,
-                              "width": 20,
-                            },
-                            Object {
-                              "borderRadius": 999,
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "row",
+                              "margin": 0,
+                              "padding": 0,
+                              "position": "relative",
                             },
+                            undefined,
                           ]
                         }
                       >
                         <View
                           style={
                             Array [
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "transparent",
-                                  "borderColor": "#d9d9d9",
-                                  "borderRadius": 2,
-                                  "borderStyle": "solid",
-                                  "borderWidth": 1,
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                  "position": "relative",
-                                  "width": "100%",
-                                },
-                                Object {
-                                  "borderRadius": 999,
-                                },
-                              ],
+                              Object {
+                                "height": 20,
+                                "overflow": "hidden",
+                                "padding": 2,
+                                "width": 20,
+                              },
+                              Object {
+                                "borderRadius": 999,
+                              },
                             ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "height": 0,
-                                "opacity": 0,
-                                "width": 0,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "borderColor": "#ffffff",
-                                "borderLeftWidth": 0,
-                                "borderRadius": 999,
-                                "borderTopWidth": 0,
-                                "borderWidth": 0,
-                                "bottom": "20%",
-                                "height": 8,
-                                "position": "absolute",
-                                "transform": Array [
+                              Array [
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#d9d9d9",
+                                    "borderRadius": 2,
+                                    "borderStyle": "solid",
+                                    "borderWidth": 1,
+                                    "height": "100%",
+                                    "justifyContent": "center",
+                                    "position": "relative",
+                                    "width": "100%",
+                                  },
                                   Object {
-                                    "scale": 0,
+                                    "borderRadius": 999,
                                   },
                                 ],
-                                "width": 8,
-                              }
+                              ]
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "height": 0,
+                                  "opacity": 0,
+                                  "width": 0,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "borderColor": "#ffffff",
+                                  "borderLeftWidth": 0,
+                                  "borderRadius": 999,
+                                  "borderTopWidth": 0,
+                                  "borderWidth": 0,
+                                  "bottom": "20%",
+                                  "height": 8,
+                                  "position": "absolute",
+                                  "transform": Array [
+                                    Object {
+                                      "scale": 0,
+                                    },
+                                  ],
+                                  "width": 8,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#000000",
+                                "marginLeft": 8,
+                                "marginRight": 8,
+                              },
+                            ]
+                          }
+                        />
                       </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "marginLeft": 8,
-                              "marginRight": 8,
-                            },
-                          ]
-                        }
-                      />
                     </View>
                   </View>
                 </View>
@@ -3104,11 +3333,9 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
             <View
               style={
                 Object {
-                  "backgroundColor": "#ffffff",
-                  "borderBottomColor": "#dddddd",
-                  "borderBottomWidth": 0.5,
+                  "backgroundColor": "#eeeeee",
                   "bottom": 0,
-                  "height": 1,
+                  "height": 0.5,
                   "left": 0,
                   "position": "absolute",
                   "right": 0,
@@ -3117,29 +3344,35 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
             />
           </View>
         </View>
-        <View>
-          <View>
-            <Text
-              style={
-                Object {
-                  "backgroundColor": "#f5f5f9",
-                  "color": "#888888",
-                  "fontSize": 14,
-                  "paddingBottom": 9,
-                  "paddingHorizontal": 15,
-                  "paddingTop": 15,
-                }
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#f5f5f9",
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            style={
+              Object {
+                "color": "#888888",
+                "fontSize": 14,
+                "paddingBottom": 9,
+                "paddingHorizontal": 15,
+                "paddingTop": 15,
               }
-            >
-              Options
-            </Text>
-          </View>
+            }
+          >
+            Options
+          </Text>
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderTopColor": "#dddddd",
+                "borderTopColor": "#eeeeee",
                 "borderTopWidth": 0.5,
+                "position": "relative",
               }
             }
           >
@@ -3203,10 +3436,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   >
                     <View
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                        ]
                       }
                     >
                       <Text
@@ -3226,125 +3463,144 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                       </Text>
                     </View>
                     <View
-                      accessibilityRole="radio"
-                      accessibilityState={
-                        Object {
-                          "checked": true,
-                          "disabled": false,
-                        }
-                      }
-                      accessible={true}
                       checked={true}
-                      collapsable={false}
-                      focusable={true}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "display": "flex",
-                            "flexDirection": "row",
-                            "margin": 0,
-                            "padding": 0,
-                            "position": "relative",
+                            "color": "#888888",
+                            "fontSize": 17,
+                            "maxWidth": "70%",
+                            "paddingLeft": 8,
+                            "textAlign": "right",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ]
                       }
+                      value="Apple"
                     >
                       <View
+                        accessibilityRole="radio"
+                        accessibilityState={
+                          Object {
+                            "checked": true,
+                            "disabled": false,
+                          }
+                        }
+                        accessible={true}
+                        checked={true}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "height": 20,
-                              "overflow": "hidden",
-                              "padding": 2,
-                              "width": 20,
-                            },
-                            Object {
-                              "borderRadius": 999,
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "row",
+                              "margin": 0,
+                              "padding": 0,
+                              "position": "relative",
                             },
+                            undefined,
                           ]
                         }
                       >
                         <View
                           style={
                             Array [
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "transparent",
-                                  "borderColor": "#d9d9d9",
-                                  "borderRadius": 2,
-                                  "borderStyle": "solid",
-                                  "borderWidth": 1,
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                  "position": "relative",
-                                  "width": "100%",
-                                },
-                                Object {
-                                  "borderRadius": 999,
-                                },
-                              ],
                               Object {
-                                "borderColor": "#108ee9",
+                                "height": 20,
+                                "overflow": "hidden",
+                                "padding": 2,
+                                "width": 20,
+                              },
+                              Object {
+                                "borderRadius": 999,
                               },
                             ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "height": 0,
-                                "opacity": 0,
-                                "width": 0,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "borderColor": "#ffffff",
-                                "borderLeftWidth": 0,
-                                "borderRadius": 999,
-                                "borderTopWidth": 0,
-                                "borderWidth": 0,
-                                "bottom": "20%",
-                                "height": 8,
-                                "position": "absolute",
-                                "transform": Array [
+                              Array [
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#d9d9d9",
+                                    "borderRadius": 2,
+                                    "borderStyle": "solid",
+                                    "borderWidth": 1,
+                                    "height": "100%",
+                                    "justifyContent": "center",
+                                    "position": "relative",
+                                    "width": "100%",
+                                  },
                                   Object {
-                                    "scale": 0,
+                                    "borderRadius": 999,
                                   },
                                 ],
-                                "width": 8,
-                              }
+                                Object {
+                                  "borderColor": "#108ee9",
+                                },
+                              ]
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "height": 0,
+                                  "opacity": 0,
+                                  "width": 0,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "borderColor": "#ffffff",
+                                  "borderLeftWidth": 0,
+                                  "borderRadius": 999,
+                                  "borderTopWidth": 0,
+                                  "borderWidth": 0,
+                                  "bottom": "20%",
+                                  "height": 8,
+                                  "position": "absolute",
+                                  "transform": Array [
+                                    Object {
+                                      "scale": 0,
+                                    },
+                                  ],
+                                  "width": 8,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#000000",
+                                "marginLeft": 8,
+                                "marginRight": 8,
+                              },
+                            ]
+                          }
+                        />
                       </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "marginLeft": 8,
-                              "marginRight": 8,
-                            },
-                          ]
-                        }
-                      />
                     </View>
                   </View>
                 </View>
@@ -3401,10 +3657,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   >
                     <View
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                        ]
                       }
                     >
                       <Text
@@ -3424,122 +3684,141 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                       </Text>
                     </View>
                     <View
-                      accessibilityRole="radio"
-                      accessibilityState={
-                        Object {
-                          "checked": false,
-                          "disabled": false,
-                        }
-                      }
-                      accessible={true}
                       checked={false}
-                      collapsable={false}
-                      focusable={true}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "display": "flex",
-                            "flexDirection": "row",
-                            "margin": 0,
-                            "padding": 0,
-                            "position": "relative",
+                            "color": "#888888",
+                            "fontSize": 17,
+                            "maxWidth": "70%",
+                            "paddingLeft": 8,
+                            "textAlign": "right",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ]
                       }
+                      value="Pear"
                     >
                       <View
+                        accessibilityRole="radio"
+                        accessibilityState={
+                          Object {
+                            "checked": false,
+                            "disabled": false,
+                          }
+                        }
+                        accessible={true}
+                        checked={false}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "height": 20,
-                              "overflow": "hidden",
-                              "padding": 2,
-                              "width": 20,
-                            },
-                            Object {
-                              "borderRadius": 999,
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "row",
+                              "margin": 0,
+                              "padding": 0,
+                              "position": "relative",
                             },
+                            undefined,
                           ]
                         }
                       >
                         <View
                           style={
                             Array [
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "transparent",
-                                  "borderColor": "#d9d9d9",
-                                  "borderRadius": 2,
-                                  "borderStyle": "solid",
-                                  "borderWidth": 1,
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                  "position": "relative",
-                                  "width": "100%",
-                                },
-                                Object {
-                                  "borderRadius": 999,
-                                },
-                              ],
+                              Object {
+                                "height": 20,
+                                "overflow": "hidden",
+                                "padding": 2,
+                                "width": 20,
+                              },
+                              Object {
+                                "borderRadius": 999,
+                              },
                             ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "height": 0,
-                                "opacity": 0,
-                                "width": 0,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "borderColor": "#ffffff",
-                                "borderLeftWidth": 0,
-                                "borderRadius": 999,
-                                "borderTopWidth": 0,
-                                "borderWidth": 0,
-                                "bottom": "20%",
-                                "height": 8,
-                                "position": "absolute",
-                                "transform": Array [
+                              Array [
+                                Array [
                                   Object {
-                                    "scale": 0,
+                                    "alignItems": "center",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#d9d9d9",
+                                    "borderRadius": 2,
+                                    "borderStyle": "solid",
+                                    "borderWidth": 1,
+                                    "height": "100%",
+                                    "justifyContent": "center",
+                                    "position": "relative",
+                                    "width": "100%",
+                                  },
+                                  Object {
+                                    "borderRadius": 999,
                                   },
                                 ],
-                                "width": 8,
-                              }
+                              ]
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "height": 0,
+                                  "opacity": 0,
+                                  "width": 0,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "borderColor": "#ffffff",
+                                  "borderLeftWidth": 0,
+                                  "borderRadius": 999,
+                                  "borderTopWidth": 0,
+                                  "borderWidth": 0,
+                                  "bottom": "20%",
+                                  "height": 8,
+                                  "position": "absolute",
+                                  "transform": Array [
+                                    Object {
+                                      "scale": 0,
+                                    },
+                                  ],
+                                  "width": 8,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#000000",
+                                "marginLeft": 8,
+                                "marginRight": 8,
+                              },
+                            ]
+                          }
+                        />
                       </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "marginLeft": 8,
-                              "marginRight": 8,
-                            },
-                          ]
-                        }
-                      />
                     </View>
                   </View>
                 </View>
@@ -3596,10 +3875,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   >
                     <View
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                        ]
                       }
                     >
                       <Text
@@ -3619,122 +3902,141 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                       </Text>
                     </View>
                     <View
-                      accessibilityRole="radio"
-                      accessibilityState={
-                        Object {
-                          "checked": false,
-                          "disabled": false,
-                        }
-                      }
-                      accessible={true}
                       checked={false}
-                      collapsable={false}
-                      focusable={true}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "display": "flex",
-                            "flexDirection": "row",
-                            "margin": 0,
-                            "padding": 0,
-                            "position": "relative",
+                            "color": "#888888",
+                            "fontSize": 17,
+                            "maxWidth": "70%",
+                            "paddingLeft": 8,
+                            "textAlign": "right",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ]
                       }
+                      value="Orange"
                     >
                       <View
+                        accessibilityRole="radio"
+                        accessibilityState={
+                          Object {
+                            "checked": false,
+                            "disabled": false,
+                          }
+                        }
+                        accessible={true}
+                        checked={false}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "height": 20,
-                              "overflow": "hidden",
-                              "padding": 2,
-                              "width": 20,
-                            },
-                            Object {
-                              "borderRadius": 999,
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "row",
+                              "margin": 0,
+                              "padding": 0,
+                              "position": "relative",
                             },
+                            undefined,
                           ]
                         }
                       >
                         <View
                           style={
                             Array [
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "transparent",
-                                  "borderColor": "#d9d9d9",
-                                  "borderRadius": 2,
-                                  "borderStyle": "solid",
-                                  "borderWidth": 1,
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                  "position": "relative",
-                                  "width": "100%",
-                                },
-                                Object {
-                                  "borderRadius": 999,
-                                },
-                              ],
+                              Object {
+                                "height": 20,
+                                "overflow": "hidden",
+                                "padding": 2,
+                                "width": 20,
+                              },
+                              Object {
+                                "borderRadius": 999,
+                              },
                             ]
                           }
                         >
                           <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "height": 0,
-                                "opacity": 0,
-                                "width": 0,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "borderColor": "#ffffff",
-                                "borderLeftWidth": 0,
-                                "borderRadius": 999,
-                                "borderTopWidth": 0,
-                                "borderWidth": 0,
-                                "bottom": "20%",
-                                "height": 8,
-                                "position": "absolute",
-                                "transform": Array [
+                            style={
+                              Array [
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#d9d9d9",
+                                    "borderRadius": 2,
+                                    "borderStyle": "solid",
+                                    "borderWidth": 1,
+                                    "height": "100%",
+                                    "justifyContent": "center",
+                                    "position": "relative",
+                                    "width": "100%",
+                                  },
                                   Object {
-                                    "scale": 0,
+                                    "borderRadius": 999,
                                   },
                                 ],
-                                "width": 8,
-                              }
+                              ]
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "height": 0,
+                                  "opacity": 0,
+                                  "width": 0,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "borderColor": "#ffffff",
+                                  "borderLeftWidth": 0,
+                                  "borderRadius": 999,
+                                  "borderTopWidth": 0,
+                                  "borderWidth": 0,
+                                  "bottom": "20%",
+                                  "height": 8,
+                                  "position": "absolute",
+                                  "transform": Array [
+                                    Object {
+                                      "scale": 0,
+                                    },
+                                  ],
+                                  "width": 8,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#000000",
+                                "marginLeft": 8,
+                                "marginRight": 8,
+                              },
+                            ]
+                          }
+                        />
                       </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "marginLeft": 8,
-                              "marginRight": 8,
-                            },
-                          ]
-                        }
-                      />
                     </View>
                   </View>
                 </View>
@@ -3743,11 +4045,9 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
             <View
               style={
                 Object {
-                  "backgroundColor": "#ffffff",
-                  "borderBottomColor": "#dddddd",
-                  "borderBottomWidth": 0.5,
+                  "backgroundColor": "#eeeeee",
                   "bottom": 0,
-                  "height": 1,
+                  "height": 0.5,
                   "left": 0,
                   "position": "absolute",
                   "right": 0,
@@ -3756,29 +4056,35 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
             />
           </View>
         </View>
-        <View>
-          <View>
-            <Text
-              style={
-                Object {
-                  "backgroundColor": "#f5f5f9",
-                  "color": "#888888",
-                  "fontSize": 14,
-                  "paddingBottom": 9,
-                  "paddingHorizontal": 15,
-                  "paddingTop": 15,
-                }
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#f5f5f9",
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            style={
+              Object {
+                "color": "#888888",
+                "fontSize": 14,
+                "paddingBottom": 9,
+                "paddingHorizontal": 15,
+                "paddingTop": 15,
               }
-            >
-              OptionsWithDisabled
-            </Text>
-          </View>
+            }
+          >
+            OptionsWithDisabled
+          </Text>
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderTopColor": "#dddddd",
+                "borderTopColor": "#eeeeee",
                 "borderTopWidth": 0.5,
+                "position": "relative",
               }
             }
           >
@@ -3842,10 +4148,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   >
                     <View
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                        ]
                       }
                     >
                       <Text
@@ -3865,125 +4175,144 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                       </Text>
                     </View>
                     <View
-                      accessibilityRole="radio"
-                      accessibilityState={
-                        Object {
-                          "checked": true,
-                          "disabled": false,
-                        }
-                      }
-                      accessible={true}
                       checked={true}
-                      collapsable={false}
-                      focusable={true}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "display": "flex",
-                            "flexDirection": "row",
-                            "margin": 0,
-                            "padding": 0,
-                            "position": "relative",
+                            "color": "#888888",
+                            "fontSize": 17,
+                            "maxWidth": "70%",
+                            "paddingLeft": 8,
+                            "textAlign": "right",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ]
                       }
+                      value="Apple"
                     >
                       <View
+                        accessibilityRole="radio"
+                        accessibilityState={
+                          Object {
+                            "checked": true,
+                            "disabled": false,
+                          }
+                        }
+                        accessible={true}
+                        checked={true}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "height": 20,
-                              "overflow": "hidden",
-                              "padding": 2,
-                              "width": 20,
-                            },
-                            Object {
-                              "borderRadius": 999,
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "row",
+                              "margin": 0,
+                              "padding": 0,
+                              "position": "relative",
                             },
+                            undefined,
                           ]
                         }
                       >
                         <View
                           style={
                             Array [
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "transparent",
-                                  "borderColor": "#d9d9d9",
-                                  "borderRadius": 2,
-                                  "borderStyle": "solid",
-                                  "borderWidth": 1,
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                  "position": "relative",
-                                  "width": "100%",
-                                },
-                                Object {
-                                  "borderRadius": 999,
-                                },
-                              ],
                               Object {
-                                "borderColor": "#108ee9",
+                                "height": 20,
+                                "overflow": "hidden",
+                                "padding": 2,
+                                "width": 20,
+                              },
+                              Object {
+                                "borderRadius": 999,
                               },
                             ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "height": 0,
-                                "opacity": 0,
-                                "width": 0,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "borderColor": "#ffffff",
-                                "borderLeftWidth": 0,
-                                "borderRadius": 999,
-                                "borderTopWidth": 0,
-                                "borderWidth": 0,
-                                "bottom": "20%",
-                                "height": 8,
-                                "position": "absolute",
-                                "transform": Array [
+                              Array [
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#d9d9d9",
+                                    "borderRadius": 2,
+                                    "borderStyle": "solid",
+                                    "borderWidth": 1,
+                                    "height": "100%",
+                                    "justifyContent": "center",
+                                    "position": "relative",
+                                    "width": "100%",
+                                  },
                                   Object {
-                                    "scale": 0,
+                                    "borderRadius": 999,
                                   },
                                 ],
-                                "width": 8,
-                              }
+                                Object {
+                                  "borderColor": "#108ee9",
+                                },
+                              ]
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "height": 0,
+                                  "opacity": 0,
+                                  "width": 0,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "borderColor": "#ffffff",
+                                  "borderLeftWidth": 0,
+                                  "borderRadius": 999,
+                                  "borderTopWidth": 0,
+                                  "borderWidth": 0,
+                                  "bottom": "20%",
+                                  "height": 8,
+                                  "position": "absolute",
+                                  "transform": Array [
+                                    Object {
+                                      "scale": 0,
+                                    },
+                                  ],
+                                  "width": 8,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#000000",
+                                "marginLeft": 8,
+                                "marginRight": 8,
+                              },
+                            ]
+                          }
+                        />
                       </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "marginLeft": 8,
-                              "marginRight": 8,
-                            },
-                          ]
-                        }
-                      />
                     </View>
                   </View>
                 </View>
@@ -4040,10 +4369,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   >
                     <View
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                        ]
                       }
                     >
                       <Text
@@ -4063,122 +4396,141 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                       </Text>
                     </View>
                     <View
-                      accessibilityRole="radio"
-                      accessibilityState={
-                        Object {
-                          "checked": false,
-                          "disabled": false,
-                        }
-                      }
-                      accessible={true}
                       checked={false}
-                      collapsable={false}
-                      focusable={true}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "display": "flex",
-                            "flexDirection": "row",
-                            "margin": 0,
-                            "padding": 0,
-                            "position": "relative",
+                            "color": "#888888",
+                            "fontSize": 17,
+                            "maxWidth": "70%",
+                            "paddingLeft": 8,
+                            "textAlign": "right",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ]
                       }
+                      value="Pear"
                     >
                       <View
+                        accessibilityRole="radio"
+                        accessibilityState={
+                          Object {
+                            "checked": false,
+                            "disabled": false,
+                          }
+                        }
+                        accessible={true}
+                        checked={false}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "height": 20,
-                              "overflow": "hidden",
-                              "padding": 2,
-                              "width": 20,
-                            },
-                            Object {
-                              "borderRadius": 999,
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "row",
+                              "margin": 0,
+                              "padding": 0,
+                              "position": "relative",
                             },
+                            undefined,
                           ]
                         }
                       >
                         <View
                           style={
                             Array [
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "transparent",
-                                  "borderColor": "#d9d9d9",
-                                  "borderRadius": 2,
-                                  "borderStyle": "solid",
-                                  "borderWidth": 1,
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                  "position": "relative",
-                                  "width": "100%",
-                                },
-                                Object {
-                                  "borderRadius": 999,
-                                },
-                              ],
+                              Object {
+                                "height": 20,
+                                "overflow": "hidden",
+                                "padding": 2,
+                                "width": 20,
+                              },
+                              Object {
+                                "borderRadius": 999,
+                              },
                             ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "height": 0,
-                                "opacity": 0,
-                                "width": 0,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "borderColor": "#ffffff",
-                                "borderLeftWidth": 0,
-                                "borderRadius": 999,
-                                "borderTopWidth": 0,
-                                "borderWidth": 0,
-                                "bottom": "20%",
-                                "height": 8,
-                                "position": "absolute",
-                                "transform": Array [
+                              Array [
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#d9d9d9",
+                                    "borderRadius": 2,
+                                    "borderStyle": "solid",
+                                    "borderWidth": 1,
+                                    "height": "100%",
+                                    "justifyContent": "center",
+                                    "position": "relative",
+                                    "width": "100%",
+                                  },
                                   Object {
-                                    "scale": 0,
+                                    "borderRadius": 999,
                                   },
                                 ],
-                                "width": 8,
-                              }
+                              ]
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "height": 0,
+                                  "opacity": 0,
+                                  "width": 0,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "borderColor": "#ffffff",
+                                  "borderLeftWidth": 0,
+                                  "borderRadius": 999,
+                                  "borderTopWidth": 0,
+                                  "borderWidth": 0,
+                                  "bottom": "20%",
+                                  "height": 8,
+                                  "position": "absolute",
+                                  "transform": Array [
+                                    Object {
+                                      "scale": 0,
+                                    },
+                                  ],
+                                  "width": 8,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#000000",
+                                "marginLeft": 8,
+                                "marginRight": 8,
+                              },
+                            ]
+                          }
+                        />
                       </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "marginLeft": 8,
-                              "marginRight": 8,
-                            },
-                          ]
-                        }
-                      />
                     </View>
                   </View>
                 </View>
@@ -4235,10 +4587,14 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                   >
                     <View
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                        ]
                       }
                     >
                       <Text
@@ -4260,122 +4616,141 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
                       </Text>
                     </View>
                     <View
-                      accessibilityRole="radio"
-                      accessibilityState={
-                        Object {
-                          "checked": false,
-                          "disabled": false,
-                        }
-                      }
-                      accessible={true}
                       checked={false}
-                      collapsable={false}
-                      focusable={true}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      onFocus={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
                           Object {
-                            "alignItems": "center",
-                            "display": "flex",
-                            "flexDirection": "row",
-                            "margin": 0,
-                            "padding": 0,
-                            "position": "relative",
+                            "color": "#888888",
+                            "fontSize": 17,
+                            "maxWidth": "70%",
+                            "paddingLeft": 8,
+                            "textAlign": "right",
+                            "textAlignVertical": "center",
                           },
                           undefined,
                         ]
                       }
+                      value="Orange"
                     >
                       <View
+                        accessibilityRole="radio"
+                        accessibilityState={
+                          Object {
+                            "checked": false,
+                            "disabled": false,
+                          }
+                        }
+                        accessible={true}
+                        checked={false}
+                        collapsable={false}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "height": 20,
-                              "overflow": "hidden",
-                              "padding": 2,
-                              "width": 20,
-                            },
-                            Object {
-                              "borderRadius": 999,
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "row",
+                              "margin": 0,
+                              "padding": 0,
+                              "position": "relative",
                             },
+                            undefined,
                           ]
                         }
                       >
                         <View
                           style={
                             Array [
-                              Array [
-                                Object {
-                                  "alignItems": "center",
-                                  "backgroundColor": "transparent",
-                                  "borderColor": "#d9d9d9",
-                                  "borderRadius": 2,
-                                  "borderStyle": "solid",
-                                  "borderWidth": 1,
-                                  "height": "100%",
-                                  "justifyContent": "center",
-                                  "position": "relative",
-                                  "width": "100%",
-                                },
-                                Object {
-                                  "borderRadius": 999,
-                                },
-                              ],
+                              Object {
+                                "height": 20,
+                                "overflow": "hidden",
+                                "padding": 2,
+                                "width": 20,
+                              },
+                              Object {
+                                "borderRadius": 999,
+                              },
                             ]
                           }
                         >
                           <View
                             style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "height": 0,
-                                "opacity": 0,
-                                "width": 0,
-                              }
-                            }
-                          />
-                          <View
-                            style={
-                              Object {
-                                "backgroundColor": "#108ee9",
-                                "borderColor": "#ffffff",
-                                "borderLeftWidth": 0,
-                                "borderRadius": 999,
-                                "borderTopWidth": 0,
-                                "borderWidth": 0,
-                                "bottom": "20%",
-                                "height": 8,
-                                "position": "absolute",
-                                "transform": Array [
+                              Array [
+                                Array [
+                                  Object {
+                                    "alignItems": "center",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#d9d9d9",
+                                    "borderRadius": 2,
+                                    "borderStyle": "solid",
+                                    "borderWidth": 1,
+                                    "height": "100%",
+                                    "justifyContent": "center",
+                                    "position": "relative",
+                                    "width": "100%",
+                                  },
                                   Object {
-                                    "scale": 0,
+                                    "borderRadius": 999,
                                   },
                                 ],
-                                "width": 8,
-                              }
+                              ]
                             }
-                          />
+                          >
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "height": 0,
+                                  "opacity": 0,
+                                  "width": 0,
+                                }
+                              }
+                            />
+                            <View
+                              style={
+                                Object {
+                                  "backgroundColor": "#108ee9",
+                                  "borderColor": "#ffffff",
+                                  "borderLeftWidth": 0,
+                                  "borderRadius": 999,
+                                  "borderTopWidth": 0,
+                                  "borderWidth": 0,
+                                  "bottom": "20%",
+                                  "height": 8,
+                                  "position": "absolute",
+                                  "transform": Array [
+                                    Object {
+                                      "scale": 0,
+                                    },
+                                  ],
+                                  "width": 8,
+                                }
+                              }
+                            />
+                          </View>
                         </View>
+                        <View
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#000000",
+                                "marginLeft": 8,
+                                "marginRight": 8,
+                              },
+                            ]
+                          }
+                        />
                       </View>
-                      <View
-                        style={
-                          Array [
-                            Object {
-                              "backgroundColor": "transparent",
-                              "marginLeft": 8,
-                              "marginRight": 8,
-                            },
-                          ]
-                        }
-                      />
                     </View>
                   </View>
                 </View>
@@ -4384,11 +4759,9 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
             <View
               style={
                 Object {
-                  "backgroundColor": "#ffffff",
-                  "borderBottomColor": "#dddddd",
-                  "borderBottomWidth": 0.5,
+                  "backgroundColor": "#eeeeee",
                   "bottom": 0,
-                  "height": 1,
+                  "height": 0.5,
                   "left": 0,
                   "position": "absolute",
                   "right": 0,
@@ -4400,11 +4773,9 @@ exports[`renders ./components/radio/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
diff --git a/components/search-bar/__tests__/__snapshots__/demo.test.js.snap b/components/search-bar/__tests__/__snapshots__/demo.test.js.snap
index 668c15b0c..782f38a08 100644
--- a/components/search-bar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/search-bar/__tests__/__snapshots__/demo.test.js.snap
@@ -12,7 +12,7 @@ exports[`renders ./components/search-bar/demo/basic.tsx correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#efeff4",
+        "backgroundColor": "#ffffff",
         "flexDirection": "row",
         "height": 44,
         "paddingLeft": 8,
@@ -40,11 +40,12 @@ exports[`renders ./components/search-bar/demo/basic.tsx correctly 1`] = `
         onSubmit={[Function]}
         onSubmitEditing={[Function]}
         placeholder="搜索"
+        placeholderTextColor="#bbbbbb"
         rejectResponderTermination={true}
         style={
           Array [
             Object {
-              "backgroundColor": "#fff",
+              "backgroundColor": "#f7f7f7",
               "borderColor": "#dddddd",
               "borderRadius": 5,
               "borderWidth": 0.5,
@@ -91,7 +92,7 @@ exports[`renders ./components/search-bar/demo/basic.tsx correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#efeff4",
+        "backgroundColor": "#ffffff",
         "flexDirection": "row",
         "height": 44,
         "paddingLeft": 8,
@@ -119,11 +120,12 @@ exports[`renders ./components/search-bar/demo/basic.tsx correctly 1`] = `
         onSubmit={[Function]}
         onSubmitEditing={[Function]}
         placeholder="搜索"
+        placeholderTextColor="#bbbbbb"
         rejectResponderTermination={true}
         style={
           Array [
             Object {
-              "backgroundColor": "#fff",
+              "backgroundColor": "#f7f7f7",
               "borderColor": "#dddddd",
               "borderRadius": 5,
               "borderWidth": 0.5,
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
index b4589b21d..2550c9c80 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -3,29 +3,35 @@
 exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
 <RCTScrollView>
   <View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          基础用法
-        </Text>
-      </View>
+        }
+      >
+        基础用法
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -73,11 +79,17 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
+                onAfterChange={[Function]}
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
                 }
               >
                 <View
@@ -110,7 +122,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#f5f5f9",
+                          "backgroundColor": "#f7f7f7",
                           "borderRadius": 3,
                           "height": 3,
                           "position": "absolute",
@@ -153,11 +165,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 32,
                           "elevation": 3,
-                          "height": 32,
-                          "marginLeft": -16,
                           "shadowColor": "#000000",
                           "shadowOffset": Object {
                             "height": 1,
@@ -170,7 +178,6 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                               "translateX": 0,
                             },
                           ],
-                          "width": 32,
                           "zIndex": 2,
                         }
                       }
@@ -179,9 +186,13 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Object {
                             "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 32,
                             "flex": 1,
                             "flexDirection": "row",
+                            "height": 32,
                             "justifyContent": "center",
+                            "width": 32,
                           }
                         }
                       >
@@ -240,11 +251,9 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -253,29 +262,35 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          显示刻度(ticks)并指定步距(step)
-        </Text>
-      </View>
+        }
+      >
+        显示刻度(ticks)并指定步距(step)
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -323,12 +338,20 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
+                defaultValue={40}
+                step={10}
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
                 }
+                ticks={true}
               >
                 <View
                   style={
@@ -360,7 +383,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#f5f5f9",
+                          "backgroundColor": "#f7f7f7",
                           "borderRadius": 3,
                           "height": 3,
                           "position": "absolute",
@@ -400,7 +423,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -421,7 +444,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -442,7 +465,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -463,7 +486,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -484,7 +507,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -505,7 +528,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -524,7 +547,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -543,7 +566,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -562,7 +585,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -581,7 +604,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -600,7 +623,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -633,11 +656,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 32,
                           "elevation": 3,
-                          "height": 32,
-                          "marginLeft": -16,
                           "shadowColor": "#000000",
                           "shadowOffset": Object {
                             "height": 1,
@@ -650,7 +669,6 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                               "translateX": 0,
                             },
                           ],
-                          "width": 32,
                           "zIndex": 2,
                         }
                       }
@@ -659,9 +677,13 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Object {
                             "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 32,
                             "flex": 1,
                             "flexDirection": "row",
+                            "height": 32,
                             "justifyContent": "center",
+                            "width": 32,
                           }
                         }
                       >
@@ -720,11 +742,9 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -733,29 +753,35 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          传入刻度标记(marks)
-        </Text>
-      </View>
+        }
+      >
+        传入刻度标记(marks)
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -803,12 +829,29 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
-                style={
+                marks={
                   Object {
-                    "flex": 1,
-                    "flexDirection": "column",
+                    "0": 0,
+                    "100": 100,
+                    "20": 20,
+                    "40": 40,
+                    "60": 60,
+                    "80": 80,
                   }
                 }
+                step={20}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
+                }
+                ticks={true}
               >
                 <View
                   style={
@@ -840,7 +883,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#f5f5f9",
+                          "backgroundColor": "#f7f7f7",
                           "borderRadius": 3,
                           "height": 3,
                           "position": "absolute",
@@ -880,7 +923,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -901,7 +944,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -920,7 +963,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -939,7 +982,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -958,7 +1001,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -977,7 +1020,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1010,11 +1053,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 32,
                           "elevation": 3,
-                          "height": 32,
-                          "marginLeft": -16,
                           "shadowColor": "#000000",
                           "shadowOffset": Object {
                             "height": 1,
@@ -1027,7 +1066,6 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                               "translateX": 0,
                             },
                           ],
-                          "width": 32,
                           "zIndex": 2,
                         }
                       }
@@ -1036,9 +1074,13 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Object {
                             "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 32,
                             "flex": 1,
                             "flexDirection": "row",
+                            "height": 32,
                             "justifyContent": "center",
+                            "width": 32,
                           }
                         }
                       >
@@ -1269,11 +1311,9 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1282,29 +1322,35 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          最大(max)/最小值(min)
-        </Text>
-      </View>
+        }
+      >
+        最大(max)/最小值(min)
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1352,12 +1398,22 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
+                max={1000}
+                min={100}
+                onAfterChange={[Function]}
+                step={100}
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
                 }
+                ticks={true}
               >
                 <View
                   style={
@@ -1389,7 +1445,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#f5f5f9",
+                          "backgroundColor": "#f7f7f7",
                           "borderRadius": 3,
                           "height": 3,
                           "position": "absolute",
@@ -1429,7 +1485,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1450,7 +1506,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1469,7 +1525,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1488,7 +1544,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1507,7 +1563,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1526,7 +1582,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1545,7 +1601,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1564,7 +1620,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1583,7 +1639,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1602,7 +1658,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1635,11 +1691,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 32,
                           "elevation": 3,
-                          "height": 32,
-                          "marginLeft": -16,
                           "shadowColor": "#000000",
                           "shadowOffset": Object {
                             "height": 1,
@@ -1652,7 +1704,6 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                               "translateX": 0,
                             },
                           ],
-                          "width": 32,
                           "zIndex": 2,
                         }
                       }
@@ -1661,9 +1712,13 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Object {
                             "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 32,
                             "flex": 1,
                             "flexDirection": "row",
+                            "height": 32,
                             "justifyContent": "center",
+                            "width": 32,
                           }
                         }
                       >
@@ -1722,11 +1777,9 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1735,29 +1788,35 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          双滑块(range)
-        </Text>
-      </View>
+        }
+      >
+        双滑块(range)
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1805,12 +1864,35 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
-                style={
+                defaultValue={
+                  Array [
+                    40,
+                    60,
+                  ]
+                }
+                marks={
                   Object {
-                    "flex": 1,
-                    "flexDirection": "column",
+                    "0": 0,
+                    "100": 100,
+                    "20": 20,
+                    "40": 40,
+                    "60": 60,
+                    "80": 80,
                   }
                 }
+                range={true}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
+                }
+                ticks={true}
               >
                 <View
                   style={
@@ -1842,7 +1924,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#f5f5f9",
+                          "backgroundColor": "#f7f7f7",
                           "borderRadius": 3,
                           "height": 3,
                           "position": "absolute",
@@ -1882,7 +1964,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1901,7 +1983,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1920,7 +2002,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1941,7 +2023,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1962,7 +2044,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -1981,7 +2063,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 7,
                               "height": 7,
                               "marginLeft": -3,
@@ -2014,11 +2096,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 32,
                           "elevation": 3,
-                          "height": 32,
-                          "marginLeft": -16,
                           "position": "absolute",
                           "shadowColor": "#000000",
                           "shadowOffset": Object {
@@ -2032,7 +2110,6 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                               "translateX": 0,
                             },
                           ],
-                          "width": 32,
                           "zIndex": 2,
                         }
                       }
@@ -2041,9 +2118,13 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Object {
                             "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 32,
                             "flex": 1,
                             "flexDirection": "row",
+                            "height": 32,
                             "justifyContent": "center",
+                            "width": 32,
                           }
                         }
                       >
@@ -2110,11 +2191,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 32,
                           "elevation": 3,
-                          "height": 32,
-                          "marginLeft": -16,
                           "shadowColor": "#000000",
                           "shadowOffset": Object {
                             "height": 1,
@@ -2127,7 +2204,6 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                               "translateX": 0,
                             },
                           ],
-                          "width": 32,
                           "zIndex": 2,
                         }
                       }
@@ -2136,9 +2212,13 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                         style={
                           Object {
                             "alignItems": "center",
+                            "backgroundColor": "#ffffff",
+                            "borderRadius": 32,
                             "flex": 1,
                             "flexDirection": "row",
+                            "height": 32,
                             "justifyContent": "center",
+                            "width": 32,
                           }
                         }
                       >
@@ -2369,11 +2449,9 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -2382,29 +2460,35 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          在拖动时显示悬浮提示
-        </Text>
-      </View>
+        }
+      >
+        在拖动时显示悬浮提示
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -2452,11 +2536,17 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
+                popover={true}
                 style={
-                  Object {
-                    "flex": 1,
-                    "flexDirection": "column",
-                  }
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
                 }
               >
                 <View
@@ -2489,7 +2579,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                     <View
                       style={
                         Object {
-                          "backgroundColor": "#f5f5f9",
+                          "backgroundColor": "#f7f7f7",
                           "borderRadius": 3,
                           "height": 3,
                           "position": "absolute",
@@ -2532,11 +2622,7 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                       onStartShouldSetResponder={[Function]}
                       style={
                         Object {
-                          "backgroundColor": "#ffffff",
-                          "borderRadius": 32,
                           "elevation": 3,
-                          "height": 32,
-                          "marginLeft": -16,
                           "shadowColor": "#000000",
                           "shadowOffset": Object {
                             "height": 1,
@@ -2549,7 +2635,6 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                               "translateX": 0,
                             },
                           ],
-                          "width": 32,
                           "zIndex": 2,
                         }
                       }
@@ -2567,9 +2652,13 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
                           style={
                             Object {
                               "alignItems": "center",
+                              "backgroundColor": "#ffffff",
+                              "borderRadius": 32,
                               "flex": 1,
                               "flexDirection": "row",
+                              "height": 32,
                               "justifyContent": "center",
+                              "width": 32,
                             }
                           }
                         >
@@ -2629,11 +2718,9 @@ exports[`renders ./components/slider/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
diff --git a/components/stepper/__tests__/__snapshots__/demo.test.js.snap b/components/stepper/__tests__/__snapshots__/demo.test.js.snap
index ab5aac0d2..98b6ff894 100644
--- a/components/stepper/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/stepper/__tests__/__snapshots__/demo.test.js.snap
@@ -11,29 +11,35 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
 >
   <RCTScrollView>
     <View>
-      <View>
-        <View>
-          <Text
-            style={
-              Object {
-                "backgroundColor": "#f5f5f9",
-                "color": "#888888",
-                "fontSize": 14,
-                "paddingBottom": 9,
-                "paddingHorizontal": 15,
-                "paddingTop": 15,
-              }
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#f5f5f9",
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          style={
+            Object {
+              "color": "#888888",
+              "fontSize": 14,
+              "paddingBottom": 9,
+              "paddingHorizontal": 15,
+              "paddingTop": 15,
             }
-          >
-            基础用法
-          </Text>
-        </View>
+          }
+        >
+          基础用法
+        </Text>
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderTopColor": "#dddddd",
+              "borderTopColor": "#eeeeee",
               "borderTopWidth": 0.5,
+              "position": "relative",
             }
           }
         >
@@ -80,42 +86,32 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    基础用法
-                  </Text>
-                </View>
+                  基础用法
+                </Text>
                 <View
+                  defaultValue={1}
+                  onChange={[Function]}
                   style={
                     Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      Object {
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
                       undefined,
                     ]
                   }
@@ -125,12 +121,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -138,183 +140,208 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          false,
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={true}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={true}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            false,
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          false,
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="1"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
+                          "inputDisabled": Object {
+                            "opacity": 0.4,
                           },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          false,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
+                          },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="1"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -364,42 +391,32 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
+                  步长设置
+                </Text>
+                <View
+                  defaultValue={10}
+                  step={10}
+                  style={
+                    Array [
                       Object {
-                        "color": "#000000",
+                        "color": "#888888",
                         "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
                         "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    步长设置
-                  </Text>
-                </View>
-                <View
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      },
                       undefined,
                     ]
                   }
@@ -409,12 +426,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -422,183 +445,208 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          false,
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={true}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={true}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            false,
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          false,
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="10"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
+                          "inputDisabled": Object {
+                            "opacity": 0.4,
                           },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          false,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
+                          },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="10"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -648,42 +696,32 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    限制输入范围
-                  </Text>
-                </View>
+                  限制输入范围
+                </Text>
                 <View
+                  max={5}
+                  min={-5}
                   style={
                     Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      Object {
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
                       undefined,
                     ]
                   }
@@ -693,12 +731,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -706,183 +750,208 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          false,
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={true}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={true}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            false,
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          false,
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="0"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
+                          "inputDisabled": Object {
+                            "opacity": 0.4,
                           },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          false,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
+                          },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="0"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -932,42 +1001,31 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    格式化到一位小数
-                  </Text>
-                </View>
+                  格式化到一位小数
+                </Text>
                 <View
+                  digits={1}
                   style={
                     Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      Object {
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
                       undefined,
                     ]
                   }
@@ -977,12 +1035,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -990,183 +1054,208 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          false,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
                             },
-                            false,
-                          ]
-                        }
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                    >
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
+                            },
+                            false,
+                          ]
+                        }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={true}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={true}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            false,
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          false,
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="0.0"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
+                          "inputDisabled": Object {
+                            "opacity": 0.4,
                           },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          false,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
+                          },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="0.0"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -1216,42 +1305,34 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    自定义格式
-                  </Text>
-                </View>
+                  自定义格式
+                </Text>
                 <View
+                  defaultValue={93}
+                  formatter={[Function]}
+                  onChange={[Function]}
+                  parser={[Function]}
                   style={
                     Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      Object {
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
                       undefined,
                     ]
                   }
@@ -1261,12 +1342,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -1274,183 +1361,208 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          false,
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={true}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={true}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            false,
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          false,
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="$ 93"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
+                          "inputDisabled": Object {
+                            "opacity": 0.4,
                           },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          false,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
+                          },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="$ 93"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -1460,11 +1572,9 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderBottomColor": "#dddddd",
-                "borderBottomWidth": 0.5,
+                "backgroundColor": "#eeeeee",
                 "bottom": 0,
-                "height": 1,
+                "height": 0.5,
                 "left": 0,
                 "position": "absolute",
                 "right": 0,
@@ -1473,29 +1583,35 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
           />
         </View>
       </View>
-      <View>
-        <View>
-          <Text
-            style={
-              Object {
-                "backgroundColor": "#f5f5f9",
-                "color": "#888888",
-                "fontSize": 14,
-                "paddingBottom": 9,
-                "paddingHorizontal": 15,
-                "paddingTop": 15,
-              }
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#f5f5f9",
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          style={
+            Object {
+              "color": "#888888",
+              "fontSize": 14,
+              "paddingBottom": 9,
+              "paddingHorizontal": 15,
+              "paddingTop": 15,
             }
-          >
-            状态/样式
-          </Text>
-        </View>
+          }
+        >
+          状态/样式
+        </Text>
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderTopColor": "#dddddd",
+              "borderTopColor": "#eeeeee",
               "borderTopWidth": 0.5,
+              "position": "relative",
             }
           }
         >
@@ -1542,42 +1658,31 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    禁用状态
-                  </Text>
-                </View>
+                  禁用状态
+                </Text>
                 <View
+                  disabled={true}
                   style={
                     Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      Object {
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
                       undefined,
                     ]
                   }
@@ -1587,12 +1692,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -1600,193 +1711,218 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          Object {
-                            "opacity": 0.4,
-                          },
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             Object {
-                              "color": "#bbbbbb",
+                              "opacity": 0.4,
                             },
                           ]
                         }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              Object {
+                                "color": "#bbbbbb",
+                              },
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={false}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={false}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            Object {
+                              "opacity": 0.4,
+                            },
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          Object {
+                          "inputDisabled": Object {
                             "opacity": 0.4,
                           },
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="0"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
-                          },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          Object {
-                            "opacity": 0.4,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
                           },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="0"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             Object {
-                              "color": "#bbbbbb",
+                              "opacity": 0.4,
                             },
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              Object {
+                                "color": "#bbbbbb",
+                              },
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -1836,42 +1972,31 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    输入框只读状态
-                  </Text>
-                </View>
+                  输入框只读状态
+                </Text>
                 <View
+                  readOnly={true}
                   style={
                     Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      Object {
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
                       undefined,
                     ]
                   }
@@ -1881,12 +2006,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -1894,183 +2025,208 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          false,
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={false}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={false}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            false,
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          false,
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="0"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
+                          "inputDisabled": Object {
+                            "opacity": 0.4,
                           },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          false,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
+                          },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="0"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -2120,42 +2276,32 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    }
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
-                  >
-                    获得/失去焦点
-                  </Text>
-                </View>
+                  }
+                >
+                  获得/失去焦点
+                </Text>
                 <View
+                  onBlur={[Function]}
+                  onFocus={[Function]}
                   style={
                     Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      Object {
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
                       undefined,
                     ]
                   }
@@ -2165,12 +2311,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -2178,183 +2330,208 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          false,
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={true}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={true}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            false,
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          false,
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="0"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
+                          "inputDisabled": Object {
+                            "opacity": 0.4,
                           },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          false,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
+                          },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="0"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -2404,42 +2581,34 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    允许清空
-                  </Text>
-                </View>
+                  允许清空
+                </Text>
                 <View
+                  allowEmpty={true}
+                  max={20}
+                  min={10}
+                  onChange={[Function]}
                   style={
                     Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      Object {
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
                       undefined,
                     ]
                   }
@@ -2449,12 +2618,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -2462,187 +2637,212 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          Object {
-                            "opacity": 0.4,
-                          },
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             Object {
-                              "color": "#bbbbbb",
+                              "opacity": 0.4,
                             },
                           ]
                         }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              Object {
+                                "color": "#bbbbbb",
+                              },
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={true}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={true}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            false,
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          false,
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="0"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
+                          "inputDisabled": Object {
+                            "opacity": 0.4,
                           },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          false,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
+                          },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="0"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -2692,42 +2892,32 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    自定义样式
-                  </Text>
-                </View>
+                  自定义样式
+                </Text>
                 <View
+                  defaultValue={10000}
+                  step={10000}
                   style={
                     Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "position": "relative",
-                        },
-                        Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                      ],
+                      Object {
+                        "color": "#888888",
+                        "fontSize": 17,
+                        "maxWidth": "70%",
+                        "paddingLeft": 8,
+                        "textAlign": "right",
+                        "textAlignVertical": "center",
+                      },
                       undefined,
                     ]
                   }
@@ -2737,12 +2927,18 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                       Array [
                         Array [
                           Object {
-                            "fontSize": 17,
-                            "marginRight": 6,
+                            "alignItems": "center",
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
+                            "position": "relative",
+                            "width": "100%",
                           },
                           Object {
-                            "flexShrink": 0,
-                            "marginRight": 2,
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
                         ],
                         undefined,
@@ -2750,183 +2946,208 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
                       style={
                         Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
-                            "borderRadius": 2,
-                            "flex": 1,
-                            "justifyContent": "center",
-                            "width": 28,
-                          },
-                          false,
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginRight": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginRight": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        -
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          -
+                        </Text>
+                      </View>
                     </View>
-                  </View>
-                  <TextInput
-                    allowFontScaling={true}
-                    editable={true}
-                    onBlur={[Function]}
-                    onChangeText={[Function]}
-                    onFocus={[Function]}
-                    onSubmitEditing={[Function]}
-                    placeholderTextColor="#bbbbbb"
-                    rejectResponderTermination={true}
-                    secureTextEntry={false}
-                    selectTextOnFocus={true}
-                    style={
-                      Array [
+                    <TextInput
+                      allowFontScaling={true}
+                      editable={true}
+                      onBlur={[Function]}
+                      onChangeText={[Function]}
+                      onFocus={[Function]}
+                      onSubmitEditing={[Function]}
+                      placeholderTextColor="#bbbbbb"
+                      rejectResponderTermination={true}
+                      secureTextEntry={false}
+                      selectTextOnFocus={true}
+                      style={
                         Array [
-                          Object {
-                            "flex": 1,
-                            "fontSize": 17,
-                            "includeFontPadding": true,
-                            "overflow": "hidden",
-                            "paddingVertical": 6,
-                            "textAlignVertical": "center",
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "flex": 1,
+                              "fontSize": 17,
+                              "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
+                              "overflow": "hidden",
+                              "paddingVertical": 6,
+                              "textAlignVertical": "center",
+                              "width": "100%",
+                            },
+                            Object {
+                              "backgroundColor": "#f7f7f7",
+                              "color": "#000000",
+                              "fontSize": 14,
+                              "textAlign": "center",
+                            },
+                          ],
+                          undefined,
+                          Array [
+                            undefined,
+                            false,
+                          ],
+                        ]
+                      }
+                      styles={
+                        Object {
+                          "container": Object {
+                            "alignItems": "stretch",
+                            "width": 104,
                           },
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "disabledStepTextColor": Object {
+                            "color": "#bbbbbb",
+                          },
+                          "input": Object {
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
                           },
-                        ],
-                        undefined,
-                        Array [
-                          undefined,
-                          false,
-                        ],
-                      ]
-                    }
-                    styles={
-                      Object {
-                        "container": Object {
-                          "alignItems": "stretch",
-                          "width": 104,
-                        },
-                        "disabledStepTextColor": Object {
-                          "color": "#bbbbbb",
-                        },
-                        "input": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "color": "#000000",
-                          "fontSize": 14,
-                          "textAlign": "center",
-                        },
-                        "inputDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "prefix": Object {
-                          "flexShrink": 0,
-                          "marginRight": 2,
-                        },
-                        "stepDisabled": Object {
-                          "opacity": 0.4,
-                        },
-                        "stepText": Object {
-                          "backgroundColor": "transparent",
-                          "color": "#108ee9",
-                          "fontSize": 20,
-                          "textAlign": "center",
-                        },
-                        "stepWrap": Object {
-                          "backgroundColor": "#f5f5f9",
-                          "borderRadius": 2,
-                          "flex": 1,
-                          "justifyContent": "center",
-                          "width": 28,
-                        },
-                        "suffix": Object {
-                          "flexShrink": 0,
-                          "marginLeft": 2,
-                        },
-                      }
-                    }
-                    underlineColorAndroid="transparent"
-                    value="10000"
-                  />
-                  <View
-                    style={
-                      Array [
-                        Array [
-                          Object {
-                            "fontSize": 17,
-                            "marginLeft": 6,
+                          "inputDisabled": Object {
+                            "opacity": 0.4,
                           },
-                          Object {
+                          "prefix": Object {
                             "flexShrink": 0,
-                            "marginLeft": 2,
+                            "marginRight": 2,
                           },
-                        ],
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#f5f5f9",
+                          "stepDisabled": Object {
+                            "opacity": 0.4,
+                          },
+                          "stepText": Object {
+                            "backgroundColor": "transparent",
+                            "color": "#108ee9",
+                            "fontSize": 20,
+                            "textAlign": "center",
+                          },
+                          "stepWrap": Object {
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
                             "width": 28,
                           },
-                          false,
+                          "suffix": Object {
+                            "flexShrink": 0,
+                            "marginLeft": 2,
+                          },
+                        }
+                      }
+                      underlineColorAndroid="transparent"
+                      value="10000"
+                    />
+                    <View
+                      style={
+                        Array [
+                          Array [
+                            Object {
+                              "color": "#000000",
+                              "fontSize": 17,
+                              "marginLeft": 6,
+                            },
+                            Object {
+                              "flexShrink": 0,
+                              "marginLeft": 2,
+                            },
+                          ],
+                          undefined,
                         ]
                       }
                     >
-                      <Text
+                      <View
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "transparent",
-                              "color": "#108ee9",
-                              "fontSize": 20,
-                              "textAlign": "center",
+                              "backgroundColor": "#f7f7f7",
+                              "borderRadius": 2,
+                              "flex": 1,
+                              "justifyContent": "center",
+                              "width": 28,
                             },
                             false,
                           ]
                         }
                       >
-                        +
-                      </Text>
+                        <Text
+                          style={
+                            Array [
+                              Object {
+                                "backgroundColor": "transparent",
+                                "color": "#108ee9",
+                                "fontSize": 20,
+                                "textAlign": "center",
+                              },
+                              false,
+                            ]
+                          }
+                        >
+                          +
+                        </Text>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -2936,11 +3157,9 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderBottomColor": "#dddddd",
-                "borderBottomWidth": 0.5,
+                "backgroundColor": "#eeeeee",
                 "bottom": 0,
-                "height": 1,
+                "height": 0.5,
                 "left": 0,
                 "position": "absolute",
                 "right": 0,
@@ -2949,29 +3168,35 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
           />
         </View>
       </View>
-      <View>
-        <View>
-          <Text
-            style={
-              Object {
-                "backgroundColor": "#f5f5f9",
-                "color": "#888888",
-                "fontSize": 14,
-                "paddingBottom": 9,
-                "paddingHorizontal": 15,
-                "paddingTop": 15,
-              }
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#f5f5f9",
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          style={
+            Object {
+              "color": "#888888",
+              "fontSize": 14,
+              "paddingBottom": 9,
+              "paddingHorizontal": 15,
+              "paddingTop": 15,
             }
-          >
-            stringMode
-          </Text>
-        </View>
+          }
+        >
+          stringMode
+        </Text>
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderTopColor": "#dddddd",
+              "borderTopColor": "#eeeeee",
               "borderTopWidth": 0.5,
+              "position": "relative",
             }
           }
         >
@@ -3019,11 +3244,22 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                 }
               >
                 <View
+                  defaultValue="0.000000000000002"
+                  onChange={[Function]}
+                  step="0.000000000000001"
+                  stringMode={true}
                   style={
-                    Object {
-                      "flex": 1,
-                      "flexDirection": "column",
-                    }
+                    Array [
+                      Object {
+                        "color": "#000000",
+                        "flex": 1,
+                        "fontSize": 17,
+                        "textAlignVertical": "center",
+                      },
+                      Object {
+                        "width": "100%",
+                      },
+                    ]
                   }
                 >
                   <View
@@ -3034,7 +3270,11 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                             "alignItems": "center",
                             "display": "flex",
                             "flexDirection": "row",
+                            "maxHeight": "100%",
+                            "maxWidth": "100%",
+                            "minHeight": 24,
                             "position": "relative",
+                            "width": "100%",
                           },
                           Object {
                             "alignItems": "stretch",
@@ -3052,6 +3292,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                         Array [
                           Array [
                             Object {
+                              "color": "#000000",
                               "fontSize": 17,
                               "marginRight": 6,
                             },
@@ -3077,7 +3318,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 2,
                               "flex": 1,
                               "justifyContent": "center",
@@ -3119,15 +3360,20 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                         Array [
                           Array [
                             Object {
+                              "color": "#000000",
                               "flex": 1,
                               "fontSize": 17,
                               "includeFontPadding": true,
+                              "maxHeight": "100%",
+                              "maxWidth": "100%",
+                              "minHeight": 24,
                               "overflow": "hidden",
                               "paddingVertical": 6,
                               "textAlignVertical": "center",
+                              "width": "100%",
                             },
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "color": "#000000",
                               "fontSize": 14,
                               "textAlign": "center",
@@ -3150,7 +3396,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                             "color": "#bbbbbb",
                           },
                           "input": Object {
-                            "backgroundColor": "#f5f5f9",
+                            "backgroundColor": "#f7f7f7",
                             "color": "#000000",
                             "fontSize": 14,
                             "textAlign": "center",
@@ -3172,7 +3418,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                             "textAlign": "center",
                           },
                           "stepWrap": Object {
-                            "backgroundColor": "#f5f5f9",
+                            "backgroundColor": "#f7f7f7",
                             "borderRadius": 2,
                             "flex": 1,
                             "justifyContent": "center",
@@ -3192,6 +3438,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                         Array [
                           Array [
                             Object {
+                              "color": "#000000",
                               "fontSize": 17,
                               "marginLeft": 6,
                             },
@@ -3217,7 +3464,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "backgroundColor": "#f5f5f9",
+                              "backgroundColor": "#f7f7f7",
                               "borderRadius": 2,
                               "flex": 1,
                               "justifyContent": "center",
@@ -3249,29 +3496,35 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
               </View>
             </View>
           </View>
-          <View>
-            <View>
-              <Text
-                style={
-                  Object {
-                    "backgroundColor": "#f5f5f9",
-                    "color": "#888888",
-                    "fontSize": 14,
-                    "paddingBottom": 9,
-                    "paddingHorizontal": 15,
-                    "paddingTop": 15,
-                  }
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#f5f5f9",
+                },
+                undefined,
+              ]
+            }
+          >
+            <Text
+              style={
+                Object {
+                  "color": "#888888",
+                  "fontSize": 14,
+                  "paddingBottom": 9,
+                  "paddingHorizontal": 15,
+                  "paddingTop": 15,
                 }
-              >
-                stringMode control
-              </Text>
-            </View>
+              }
+            >
+              stringMode control
+            </Text>
             <View
               style={
                 Object {
-                  "backgroundColor": "#ffffff",
-                  "borderTopColor": "#dddddd",
+                  "borderTopColor": "#eeeeee",
                   "borderTopWidth": 0.5,
+                  "position": "relative",
                 }
               }
             >
@@ -3319,12 +3572,23 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                     }
                   >
                     <View
+                      onChange={[Function]}
+                      step="13579"
+                      stringMode={true}
                       style={
-                        Object {
-                          "flex": 1,
-                          "flexDirection": "column",
-                        }
+                        Array [
+                          Object {
+                            "color": "#000000",
+                            "flex": 1,
+                            "fontSize": 17,
+                            "textAlignVertical": "center",
+                          },
+                          Object {
+                            "width": "100%",
+                          },
+                        ]
                       }
+                      value="9999999999999999"
                     >
                       <View
                         style={
@@ -3334,7 +3598,11 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                                 "alignItems": "center",
                                 "display": "flex",
                                 "flexDirection": "row",
+                                "maxHeight": "100%",
+                                "maxWidth": "100%",
+                                "minHeight": 24,
                                 "position": "relative",
+                                "width": "100%",
                               },
                               Object {
                                 "alignItems": "stretch",
@@ -3352,6 +3620,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                             Array [
                               Array [
                                 Object {
+                                  "color": "#000000",
                                   "fontSize": 17,
                                   "marginRight": 6,
                                 },
@@ -3377,7 +3646,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                             style={
                               Array [
                                 Object {
-                                  "backgroundColor": "#f5f5f9",
+                                  "backgroundColor": "#f7f7f7",
                                   "borderRadius": 2,
                                   "flex": 1,
                                   "justifyContent": "center",
@@ -3419,15 +3688,20 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                             Array [
                               Array [
                                 Object {
+                                  "color": "#000000",
                                   "flex": 1,
                                   "fontSize": 17,
                                   "includeFontPadding": true,
+                                  "maxHeight": "100%",
+                                  "maxWidth": "100%",
+                                  "minHeight": 24,
                                   "overflow": "hidden",
                                   "paddingVertical": 6,
                                   "textAlignVertical": "center",
+                                  "width": "100%",
                                 },
                                 Object {
-                                  "backgroundColor": "#f5f5f9",
+                                  "backgroundColor": "#f7f7f7",
                                   "color": "#000000",
                                   "fontSize": 14,
                                   "textAlign": "center",
@@ -3450,7 +3724,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                                 "color": "#bbbbbb",
                               },
                               "input": Object {
-                                "backgroundColor": "#f5f5f9",
+                                "backgroundColor": "#f7f7f7",
                                 "color": "#000000",
                                 "fontSize": 14,
                                 "textAlign": "center",
@@ -3472,7 +3746,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                                 "textAlign": "center",
                               },
                               "stepWrap": Object {
-                                "backgroundColor": "#f5f5f9",
+                                "backgroundColor": "#f7f7f7",
                                 "borderRadius": 2,
                                 "flex": 1,
                                 "justifyContent": "center",
@@ -3492,6 +3766,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                             Array [
                               Array [
                                 Object {
+                                  "color": "#000000",
                                   "fontSize": 17,
                                   "marginLeft": 6,
                                 },
@@ -3517,7 +3792,7 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
                             style={
                               Array [
                                 Object {
-                                  "backgroundColor": "#f5f5f9",
+                                  "backgroundColor": "#f7f7f7",
                                   "borderRadius": 2,
                                   "flex": 1,
                                   "justifyContent": "center",
@@ -3552,11 +3827,9 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
               <View
                 style={
                   Object {
-                    "backgroundColor": "#ffffff",
-                    "borderBottomColor": "#dddddd",
-                    "borderBottomWidth": 0.5,
+                    "backgroundColor": "#eeeeee",
                     "bottom": 0,
-                    "height": 1,
+                    "height": 0.5,
                     "left": 0,
                     "position": "absolute",
                     "right": 0,
@@ -3568,11 +3841,9 @@ exports[`renders ./components/stepper/demo/basic.tsx correctly 1`] = `
           <View
             style={
               Object {
-                "backgroundColor": "#ffffff",
-                "borderBottomColor": "#dddddd",
-                "borderBottomWidth": 0.5,
+                "backgroundColor": "#eeeeee",
                 "bottom": 0,
-                "height": 1,
+                "height": 0.5,
                 "left": 0,
                 "position": "absolute",
                 "right": 0,
diff --git a/components/swipe-action/__tests__/__snapshots__/demo.test.js.snap b/components/swipe-action/__tests__/__snapshots__/demo.test.js.snap
index 2b9887231..d5e17345c 100644
--- a/components/swipe-action/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/swipe-action/__tests__/__snapshots__/demo.test.js.snap
@@ -8,13 +8,22 @@ exports[`renders ./components/swipe-action/demo/basic.tsx correctly 1`] = `
     }
   }
 >
-  <View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#f5f5f9",
+        },
+        undefined,
+      ]
+    }
+  >
     <View
       style={
         Object {
-          "backgroundColor": "#ffffff",
-          "borderTopColor": "#dddddd",
+          "borderTopColor": "#eeeeee",
           "borderTopWidth": 0.5,
+          "position": "relative",
         }
       }
     >
@@ -445,51 +454,34 @@ exports[`renders ./components/swipe-action/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    Simple example: left and right buttons
-                  </Text>
-                </View>
-                <View
+                  Simple example: left and right buttons
+                </Text>
+                <Text
+                  numberOfLines={1}
                   style={
-                    Array [
-                      Object {
-                        "flex": 1,
-                        "flexDirection": "column",
-                      },
-                    ]
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#888888",
-                        "fontSize": 17,
-                        "textAlign": "right",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    extra content
-                  </Text>
-                </View>
+                  extra content
+                </Text>
               </View>
             </View>
           </View>
@@ -498,11 +490,9 @@ exports[`renders ./components/swipe-action/demo/basic.tsx correctly 1`] = `
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderBottomColor": "#dddddd",
-            "borderBottomWidth": 0.5,
+            "backgroundColor": "#eeeeee",
             "bottom": 0,
-            "height": 1,
+            "height": 0.5,
             "left": 0,
             "position": "absolute",
             "right": 0,
@@ -511,13 +501,22 @@ exports[`renders ./components/swipe-action/demo/basic.tsx correctly 1`] = `
       />
     </View>
   </View>
-  <View>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#f5f5f9",
+        },
+        undefined,
+      ]
+    }
+  >
     <View
       style={
         Object {
-          "backgroundColor": "#ffffff",
-          "borderTopColor": "#dddddd",
+          "borderTopColor": "#eeeeee",
           "borderTopWidth": 0.5,
+          "position": "relative",
         }
       }
     >
@@ -948,51 +947,34 @@ exports[`renders ./components/swipe-action/demo/basic.tsx correctly 1`] = `
                   ]
                 }
               >
-                <View
+                <Text
+                  numberOfLines={1}
                   style={
                     Object {
+                      "color": "#000000",
                       "flex": 1,
-                      "flexDirection": "column",
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
                     }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    Simple example: left and right buttons
-                  </Text>
-                </View>
-                <View
+                  Simple example: left and right buttons
+                </Text>
+                <Text
+                  numberOfLines={1}
                   style={
-                    Array [
-                      Object {
-                        "flex": 1,
-                        "flexDirection": "column",
-                      },
-                    ]
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    }
                   }
                 >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      Object {
-                        "color": "#888888",
-                        "fontSize": 17,
-                        "textAlign": "right",
-                        "textAlignVertical": "center",
-                      }
-                    }
-                  >
-                    extra content
-                  </Text>
-                </View>
+                  extra content
+                </Text>
               </View>
             </View>
           </View>
@@ -1001,11 +983,9 @@ exports[`renders ./components/swipe-action/demo/basic.tsx correctly 1`] = `
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderBottomColor": "#dddddd",
-            "borderBottomWidth": 0.5,
+            "backgroundColor": "#eeeeee",
             "bottom": 0,
-            "height": 1,
+            "height": 0.5,
             "left": 0,
             "position": "absolute",
             "right": 0,
diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.js.snap
index dd78708ac..8d3b2eef6 100644
--- a/components/switch/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/switch/__tests__/__snapshots__/demo.test.js.snap
@@ -3,29 +3,35 @@
 exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
 <RCTScrollView>
   <View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          基本
-        </Text>
-      </View>
+        }
+      >
+        基本
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -72,115 +78,123 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                最简单的用法
+              </Text>
+              <View
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  最简单的用法
-                </Text>
-              </View>
-              <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": false,
-                    "checked": false,
-                    "mergedDisabled": false,
-                  }
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#cccccc",
-                          "borderColor": "#cccccc",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": false,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": 2,
-                        "position": "absolute",
-                        "right": 0,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#cccccc",
+                            "borderColor": "#cccccc",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
+                      ]
                     }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": 2,
+                          "position": "absolute",
+                          "right": 0,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
-                    }
-                  />
+                    />
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -189,11 +203,9 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -202,29 +214,35 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          不可用
-        </Text>
-      </View>
+        }
+      >
+        不可用
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -271,119 +289,128 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                Switch 失效状态
+              </Text>
+              <View
+                disabled={true}
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  Switch 失效状态
-                </Text>
-              </View>
-              <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": false,
-                    "checked": false,
-                    "mergedDisabled": true,
-                  }
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#cccccc",
-                          "borderColor": "#cccccc",
-                        },
-                        Object {
-                          "backgroundColor": "#cccccc66",
-                          "borderColor": "#cccccc66",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": false,
+                      "mergedDisabled": true,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": 2,
-                        "position": "absolute",
-                        "right": 0,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#cccccc",
+                            "borderColor": "#cccccc",
+                          },
+                          Object {
+                            "backgroundColor": "#cccccc66",
+                            "borderColor": "#cccccc66",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
+                      ]
                     }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": 2,
+                          "position": "absolute",
+                          "right": 0,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
-                    }
-                  />
+                    />
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -479,11 +506,9 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -492,29 +517,35 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          文字和图标
-        </Text>
-      </View>
+        }
+      >
+        文字和图标
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -562,95 +593,124 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
-                accessibilityRole="switch"
-                accessibilityState={
+                style={
                   Object {
-                    "busy": false,
-                    "checked": true,
-                    "mergedDisabled": false,
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+              />
+              <View
+                checkedChildren="开"
+                defaultChecked={true}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
+                }
+                unCheckedChildren="关"
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#108ee9",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": true,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": undefined,
-                        "position": "absolute",
-                        "right": 11,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#108ee9",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
-                    }
-                  />
-                  <Text
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
-                      }
+                      ]
                     }
                   >
-                    开
-                  </Text>
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": undefined,
+                          "position": "absolute",
+                          "right": 11,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
+                      }
+                    />
+                    <Text
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    >
+                      开
+                    </Text>
+                  </View>
                 </View>
               </View>
             </View>
@@ -700,95 +760,123 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
-                accessibilityRole="switch"
-                accessibilityState={
+                style={
                   Object {
-                    "busy": false,
-                    "checked": false,
-                    "mergedDisabled": false,
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+              />
+              <View
+                checkedChildren="1"
+                style={
+                  Array [
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
+                }
+                unCheckedChildren="0"
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#cccccc",
-                          "borderColor": "#cccccc",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": false,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": 2,
-                        "position": "absolute",
-                        "right": 0,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#cccccc",
+                            "borderColor": "#cccccc",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
-                    }
-                  />
-                  <Text
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
-                      }
+                      ]
                     }
                   >
-                    0
-                  </Text>
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": 2,
+                          "position": "absolute",
+                          "right": 0,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
+                      }
+                    />
+                    <Text
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    >
+                      0
+                    </Text>
+                  </View>
                 </View>
               </View>
             </View>
@@ -838,109 +926,150 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
-                accessibilityRole="switch"
-                accessibilityState={
+                style={
                   Object {
-                    "busy": false,
-                    "checked": true,
-                    "mergedDisabled": false,
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+              />
+              <View
+                checkedChildren={
+                  <Icon
+                    color="white"
+                    name="check"
+                    size="md"
+                  />
+                }
+                defaultChecked={true}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
+                }
+                unCheckedChildren={
+                  <Icon
+                    color="white"
+                    name="close"
+                    size="md"
+                  />
+                }
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#108ee9",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": true,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": undefined,
-                        "position": "absolute",
-                        "right": 11,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#108ee9",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
-                    }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
-                      }
+                      ]
                     }
                   >
-                    <Text
+                    <View
                       style={
-                        Array [
-                          Object {
-                            "color": "white",
-                            "fontFamily": "antoutline",
-                            "fontSize": 22,
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": undefined,
+                          "position": "absolute",
+                          "right": 11,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
                           },
-                          undefined,
-                        ]
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
+                      }
+                    />
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
                       }
                     >
-                      
-                    </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "color": "white",
+                              "fontFamily": "antoutline",
+                              "fontSize": 22,
+                              "fontStyle": "normal",
+                              "fontWeight": "normal",
+                            },
+                            undefined,
+                          ]
+                        }
+                      >
+                        
+                      </Text>
+                    </View>
                   </View>
                 </View>
               </View>
@@ -950,11 +1079,9 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -963,29 +1090,35 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          加载中
-        </Text>
-      </View>
+        }
+      >
+        加载中
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1032,141 +1165,151 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                标识开关操作仍在执行中
+              </Text>
+              <View
+                checked={true}
+                loading={true}
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  标识开关操作仍在执行中
-                </Text>
-              </View>
-              <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": true,
-                    "checked": true,
-                    "mergedDisabled": true,
-                  }
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#108ee9",
-                        },
-                        Object {
-                          "backgroundColor": "#108ee966",
-                          "borderColor": "#108ee966",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": true,
+                      "checked": true,
+                      "mergedDisabled": true,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": undefined,
-                        "position": "absolute",
-                        "right": 11,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
-                    }
-                  >
-                    <View
-                      style={
+                      Array [
                         Array [
                           Object {
                             "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
                             "flexDirection": "row",
-                            "justifyContent": "center",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#108ee9",
                           },
                           Object {
-                            "opacity": 0.4,
+                            "backgroundColor": "#108ee966",
+                            "borderColor": "#108ee966",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
+                        },
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": undefined,
+                          "position": "absolute",
+                          "right": 11,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
                           },
-                        ]
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
                     >
-                      <ActivityIndicator
-                        animating={true}
-                        color="#108ee9"
-                        hidesWhenStopped={true}
-                        size={18}
-                      />
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                            },
+                            Object {
+                              "opacity": 0.4,
+                            },
+                          ]
+                        }
+                      >
+                        <ActivityIndicator
+                          animating={true}
+                          color="#108ee9"
+                          hidesWhenStopped={true}
+                          size={18}
+                        />
+                      </View>
                     </View>
-                  </View>
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
                       }
-                    }
-                  />
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -1216,119 +1359,146 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
               }
             >
               <View
-                accessibilityRole="switch"
-                accessibilityState={
+                style={
                   Object {
-                    "busy": true,
-                    "checked": false,
-                    "mergedDisabled": true,
+                    "color": "#000000",
+                    "flex": 1,
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
+              />
+              <View
+                loading={true}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
+                }
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#cccccc",
-                          "borderColor": "#cccccc",
-                        },
-                        Object {
-                          "backgroundColor": "#cccccc66",
-                          "borderColor": "#cccccc66",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": true,
+                      "checked": false,
+                      "mergedDisabled": true,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": 2,
-                        "position": "absolute",
-                        "right": 0,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
-                        },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
-                    }
-                  >
-                    <View
-                      style={
+                      Array [
                         Array [
                           Object {
                             "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
                             "flexDirection": "row",
-                            "justifyContent": "center",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
                           },
                           Object {
-                            "opacity": 0.4,
+                            "backgroundColor": "#cccccc",
+                            "borderColor": "#cccccc",
                           },
-                        ]
+                          Object {
+                            "backgroundColor": "#cccccc66",
+                            "borderColor": "#cccccc66",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
+                        },
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": 2,
+                          "position": "absolute",
+                          "right": 0,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
                     >
-                      <ActivityIndicator
-                        animating={true}
-                        color="#cccccc"
-                        hidesWhenStopped={true}
-                        size={18}
-                      />
+                      <View
+                        style={
+                          Array [
+                            Object {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                            },
+                            Object {
+                              "opacity": 0.4,
+                            },
+                          ]
+                        }
+                      >
+                        <ActivityIndicator
+                          animating={true}
+                          color="#cccccc"
+                          hidesWhenStopped={true}
+                          size={18}
+                        />
+                      </View>
                     </View>
-                  </View>
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
                       }
-                    }
-                  />
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -1337,11 +1507,9 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1350,29 +1518,35 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          颜色
-        </Text>
-      </View>
+        }
+      >
+        颜色
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1419,119 +1593,129 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                color="red"
+              </Text>
+              <View
+                checked={true}
+                color="red"
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  color="red"
-                </Text>
-              </View>
-              <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": false,
-                    "checked": true,
-                    "mergedDisabled": false,
-                  }
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#108ee9",
-                        },
-                        undefined,
-                      ],
-                      Object {
-                        "backgroundColor": "red",
-                        "borderColor": "red",
-                        "opacity": 1,
-                      },
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": true,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": undefined,
-                        "position": "absolute",
-                        "right": 11,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#108ee9",
+                          },
+                          undefined,
+                        ],
+                        Object {
+                          "backgroundColor": "red",
+                          "borderColor": "red",
+                          "opacity": 1,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
+                        Object {
+                          "minWidth": 42,
+                        },
+                      ]
                     }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": undefined,
+                          "position": "absolute",
+                          "right": 11,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
-                    }
-                  />
+                    />
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -1540,11 +1724,9 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1553,29 +1735,35 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          异步
-        </Text>
-      </View>
+        }
+      >
+        异步
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1622,115 +1810,125 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
                 ]
               }
             >
-              <View
+              <Text
+                numberOfLines={1}
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                onChange 返回 Promise
+              </Text>
+              <View
+                checked={false}
+                onChange={[Function]}
+                style={
+                  Array [
                     Object {
-                      "color": "#000000",
+                      "color": "#888888",
                       "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
                       "textAlignVertical": "center",
-                    }
-                  }
-                >
-                  onChange 返回 Promise
-                </Text>
-              </View>
-              <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": false,
-                    "checked": false,
-                    "mergedDisabled": false,
-                  }
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#cccccc",
-                          "borderColor": "#cccccc",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": false,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": 2,
-                        "position": "absolute",
-                        "right": 0,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#cccccc",
+                            "borderColor": "#cccccc",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
+                      ]
                     }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": 2,
+                          "position": "absolute",
+                          "right": 0,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
-                    }
-                  />
+                    />
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -1739,11 +1937,9 @@ exports[`renders ./components/switch/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
diff --git a/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap b/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap
index c6b89973e..9840e26f9 100644
--- a/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tab-bar/__tests__/__snapshots__/demo.test.js.snap
@@ -59,7 +59,7 @@ exports[`renders ./components/tab-bar/demo/basic.tsx correctly 1`] = `
             style={
               Object {
                 "alignItems": "center",
-                "backgroundColor": "#efeff4",
+                "backgroundColor": "#ffffff",
                 "flexDirection": "row",
                 "height": 44,
                 "paddingLeft": 8,
@@ -86,11 +86,12 @@ exports[`renders ./components/tab-bar/demo/basic.tsx correctly 1`] = `
                 onSubmit={[Function]}
                 onSubmitEditing={[Function]}
                 placeholder="Search"
+                placeholderTextColor="#bbbbbb"
                 rejectResponderTermination={true}
                 style={
                   Array [
                     Object {
-                      "backgroundColor": "#fff",
+                      "backgroundColor": "#f7f7f7",
                       "borderColor": "#dddddd",
                       "borderRadius": 5,
                       "borderWidth": 0.5,
diff --git a/components/textarea-item/__tests__/__snapshots__/demo.test.js.snap b/components/textarea-item/__tests__/__snapshots__/demo.test.js.snap
index 3bb9b540f..d9076f39e 100644
--- a/components/textarea-item/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/textarea-item/__tests__/__snapshots__/demo.test.js.snap
@@ -12,29 +12,35 @@ exports[`renders ./components/textarea-item/demo/basic.tsx correctly 1`] = `
   }
 >
   <View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          基本
-        </Text>
-      </View>
+        }
+      >
+        基本
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -459,11 +465,9 @@ exports[`renders ./components/textarea-item/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
diff --git a/components/toast/__tests__/__snapshots__/demo.test.js.snap b/components/toast/__tests__/__snapshots__/demo.test.js.snap
index b83a4bd57..13b5aa5cb 100644
--- a/components/toast/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/toast/__tests__/__snapshots__/demo.test.js.snap
@@ -3,13 +3,22 @@
 exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
 <RCTScrollView>
   <View>
-    <View>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -59,21 +68,22 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
               <View
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
                 <Text
                   numberOfLines={1}
                   style={
-                    Array [
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      },
-                    ]
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    }
                   }
                 >
                   Enable mask
@@ -105,93 +115,111 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
                 </View>
               </View>
               <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": false,
-                    "checked": true,
-                    "mergedDisabled": false,
-                  }
+                checked={true}
+                onChange={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#108ee9",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": true,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": undefined,
-                        "position": "absolute",
-                        "right": 11,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#108ee9",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
+                      ]
                     }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": undefined,
+                          "position": "absolute",
+                          "right": 11,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
-                    }
-                  />
+                    />
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -243,21 +271,22 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
               <View
                 style={
                   Object {
+                    "color": "#000000",
                     "flex": 1,
-                    "flexDirection": "column",
+                    "fontSize": 17,
+                    "textAlignVertical": "center",
                   }
                 }
               >
                 <Text
                   numberOfLines={1}
                   style={
-                    Array [
-                      Object {
-                        "color": "#000000",
-                        "fontSize": 17,
-                        "textAlignVertical": "center",
-                      },
-                    ]
+                    Object {
+                      "color": "#000000",
+                      "flex": 1,
+                      "fontSize": 17,
+                      "textAlignVertical": "center",
+                    }
                   }
                 >
                   Enable stackable
@@ -289,93 +318,111 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
                 </View>
               </View>
               <View
-                accessibilityRole="switch"
-                accessibilityState={
-                  Object {
-                    "busy": false,
-                    "checked": true,
-                    "mergedDisabled": false,
-                  }
+                checked={true}
+                onChange={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "color": "#888888",
+                      "fontSize": 17,
+                      "maxWidth": "70%",
+                      "paddingLeft": 8,
+                      "textAlign": "right",
+                      "textAlignVertical": "center",
+                    },
+                    undefined,
+                  ]
                 }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
               >
                 <View
-                  onLayout={[Function]}
-                  style={
-                    Array [
-                      Array [
-                        Object {
-                          "alignItems": "center",
-                          "borderRadius": 31,
-                          "display": "flex",
-                          "flexDirection": "row",
-                          "height": 31,
-                          "padding": 0,
-                          "position": "relative",
-                          "width": 55,
-                        },
-                        Object {
-                          "backgroundColor": "#108ee9",
-                          "borderColor": "#108ee9",
-                        },
-                        undefined,
-                      ],
-                      false,
-                      Object {
-                        "minWidth": 42,
-                      },
-                    ]
+                  accessibilityRole="switch"
+                  accessibilityState={
+                    Object {
+                      "busy": false,
+                      "checked": true,
+                      "mergedDisabled": false,
+                    }
                   }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                 >
                   <View
+                    onLayout={[Function]}
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 27,
-                        "display": "flex",
-                        "elevation": 10,
-                        "height": 27,
-                        "justifyContent": "center",
-                        "left": undefined,
-                        "position": "absolute",
-                        "right": 11,
-                        "shadowColor": "rgb(0, 35, 11)",
-                        "shadowOffset": Object {
-                          "height": 2,
-                          "width": 0,
+                      Array [
+                        Array [
+                          Object {
+                            "alignItems": "center",
+                            "borderRadius": 31,
+                            "display": "flex",
+                            "flexDirection": "row",
+                            "height": 31,
+                            "padding": 0,
+                            "position": "relative",
+                            "width": 55,
+                          },
+                          Object {
+                            "backgroundColor": "#108ee9",
+                            "borderColor": "#108ee9",
+                          },
+                          undefined,
+                        ],
+                        false,
+                        Object {
+                          "minWidth": 42,
                         },
-                        "shadowOpacity": 0.2,
-                        "shadowRadius": 10,
-                        "width": 27,
-                      }
+                      ]
                     }
-                  />
-                  <View
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "color": "#fff",
-                        "flex": 1,
-                        "fontSize": 12,
-                        "justifyContent": "center",
-                        "marginLeft": 29,
-                        "marginRight": 2,
-                        "textAlign": "center",
+                  >
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 27,
+                          "display": "flex",
+                          "elevation": 10,
+                          "height": 27,
+                          "justifyContent": "center",
+                          "left": undefined,
+                          "position": "absolute",
+                          "right": 11,
+                          "shadowColor": "rgb(0, 35, 11)",
+                          "shadowOffset": Object {
+                            "height": 2,
+                            "width": 0,
+                          },
+                          "shadowOpacity": 0.2,
+                          "shadowRadius": 10,
+                          "width": 27,
+                        }
                       }
-                    }
-                  />
+                    />
+                    <View
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "color": "#fff",
+                          "flex": 1,
+                          "fontSize": 12,
+                          "justifyContent": "center",
+                          "marginLeft": 29,
+                          "marginRight": 2,
+                          "textAlign": "center",
+                        }
+                      }
+                    />
+                  </View>
                 </View>
               </View>
             </View>
@@ -384,11 +431,9 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -397,29 +442,35 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          图标
-        </Text>
-      </View>
+        }
+      >
+        图标
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -751,11 +802,9 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -764,29 +813,35 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          更多功能
-        </Text>
-      </View>
+        }
+      >
+        更多功能
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -988,11 +1043,9 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,
@@ -1001,29 +1054,35 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
         />
       </View>
     </View>
-    <View>
-      <View>
-        <Text
-          style={
-            Object {
-              "backgroundColor": "#f5f5f9",
-              "color": "#888888",
-              "fontSize": 14,
-              "paddingBottom": 9,
-              "paddingHorizontal": 15,
-              "paddingTop": 15,
-            }
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f5f5f9",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#888888",
+            "fontSize": 14,
+            "paddingBottom": 9,
+            "paddingHorizontal": 15,
+            "paddingTop": 15,
           }
-        >
-          手动清除
-        </Text>
-      </View>
+        }
+      >
+        手动清除
+      </Text>
       <View
         style={
           Object {
-            "backgroundColor": "#ffffff",
-            "borderTopColor": "#dddddd",
+            "borderTopColor": "#eeeeee",
             "borderTopWidth": 0.5,
+            "position": "relative",
           }
         }
       >
@@ -1225,11 +1284,9 @@ exports[`renders ./components/toast/demo/basic.tsx correctly 1`] = `
         <View
           style={
             Object {
-              "backgroundColor": "#ffffff",
-              "borderBottomColor": "#dddddd",
-              "borderBottomWidth": 0.5,
+              "backgroundColor": "#eeeeee",
               "bottom": 0,
-              "height": 1,
+              "height": 0.5,
               "left": 0,
               "position": "absolute",
               "right": 0,