React Native控件之Switch开关与Picker选择器组件讲解以及使用

【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)

转载请标明出处：

http://blog.csdn.net/developer_jiangqq/article/details/50615736

本文出自:【江清清的博客】

(一)前言

         今天我们一起来看一下Switch选择开关控件以及Picker选择器控件的介绍完全解析以及最佳实践。

         刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)Switch选择开关控件

         2.1.该为Android/iOS两个平台通用的两种状态的选择开关组件

         2.2.Switch属性方法介绍(这边只介绍平台通用属性以及只适合Android平台上面的属性方法)

• View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
• disabled bool 如果该值为true,用户就无法点击switch开关控件，默认为false
• onValueChange function 方法，当该组件的状态值发生变化的时候回调方法
• value bool 该开关的值，如果该值为true的时候，开关呈打开状态，默认为false                

          2.3.Switch使用实例

                ①.基础Switch开关控件实例演示,添加点击开关状态切换，实例代码如下:

<span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'use strict'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">;</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">import</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">React</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">AppRegistry</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Component</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">StyleSheet</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Switch</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">from</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'react-native'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">;</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">var</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">SwitchDemo</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">React</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">createClass</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  getInitialState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      trueSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">true</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      falseSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">false</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">};</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">},</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  render</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">styles</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">container</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">           </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Swtich</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">实例</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Switch</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          onValueChange</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">)</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">setState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">falseSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">})}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">         style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">marginBottom</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="lit" style="box-sizing: border-box; color: rgb(0, 102, 102);">10</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">marginTop</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="lit" style="box-sizing: border-box; color: rgb(0, 102, 102);">10</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">falseSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Switch</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          onValueChange</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">)</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">setState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">trueSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">})}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">trueSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">);</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">});</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">const</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> styles </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">StyleSheet</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">create</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  container</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    flex</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="lit" style="box-sizing: border-box; color: rgb(0, 102, 102);">1</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    justifyContent</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'center'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    alignItems</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'center'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    backgroundColor</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'#F5FCFF'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">},</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">});</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">AppRegistry</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">registerComponent</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">(</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'SwitchDemo'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">SwitchDemo</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">);</span>

运行效果如下:

  ②.Switch开关控件设置无法点击状态，该第一个Switch无法响应点击状态,实例代码如下:

<span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">var</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">SwitchDemo</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">React</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">createClass</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  getInitialState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      trueSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">true</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      falseSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">false</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">};</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">},</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  render</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">styles</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">container</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">           </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Swtich</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">实例</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Switch</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          disabled</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">true</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          onValueChange</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">)</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">setState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">falseSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">})}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">         style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">marginBottom</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="lit" style="box-sizing: border-box; color: rgb(0, 102, 102);">10</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">marginTop</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="lit" style="box-sizing: border-box; color: rgb(0, 102, 102);">10</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">falseSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Switch</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          disabled</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">false</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          onValueChange</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">)</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">setState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">trueSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">})}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">trueSwitchIsOn</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">);</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">});</span>

效果运行如下:

(三)Picker选择器控件

          2.1.该Picker渲染iOS和Android平台上面的原生选择器组件，官方实例代码如下:

<span class="tag" style="box-sizing: border-box; color: rgb(0, 0, 136);"><Picker</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="atn" style="box-sizing: border-box; color: rgb(102, 0, 102);">selectedValue</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="atv" style="box-sizing: border-box; color: rgb(0, 136, 0);">{this.state.language}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="atn" style="box-sizing: border-box; color: rgb(102, 0, 102);">onValueChange</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">lang</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">)</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="tag" style="box-sizing: border-box; color: rgb(0, 0, 136);">=></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">this.setState({language: lang})}>  </span><span class="tag" style="box-sizing: border-box; color: rgb(0, 0, 136);"><Picker.Item</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="atn" style="box-sizing: border-box; color: rgb(102, 0, 102);">label</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="atv" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Java"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="atn" style="box-sizing: border-box; color: rgb(102, 0, 102);">value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="atv" style="box-sizing: border-box; color: rgb(0, 136, 0);">"java"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="tag" style="box-sizing: border-box; color: rgb(0, 0, 136);">/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="tag" style="box-sizing: border-box; color: rgb(0, 0, 136);"><Picker.Item</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="atn" style="box-sizing: border-box; color: rgb(102, 0, 102);">label</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="atv" style="box-sizing: border-box; color: rgb(0, 136, 0);">"JavaScript"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="atn" style="box-sizing: border-box; color: rgb(102, 0, 102);">value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="atv" style="box-sizing: border-box; color: rgb(0, 136, 0);">"js"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="tag" style="box-sizing: border-box; color: rgb(0, 0, 136);">/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="tag" style="box-sizing: border-box; color: rgb(0, 0, 136);"></Picker></span>

         2.2.Picker属性方法(这边只介绍平台通用属性以及只适合Android平台上面的属性方法)

• View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
• onValueChange  function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数

itemValue:该属性值为被选中的item的属性值

itemPosition:该选择器被选中的item的索引position

• selectedValue: any任何参数值，选择器选中的item所对应的值，该可以是一个字符串或者一个数字
• style pickerStyleType 该传入style样式，设置picker的样式风格
• enabled bool 如果该值为false，picker就无法被点击选中。例如:用户无法进行做出选择
• mode enum ('dialog','dropdown')  选择器模式。在Android平台上面，设置mode可以控制用户点击picker弹出的样式风格

'dialog': 该值为默认值，进行弹出一个模态dialog(弹出框)

'dropdown':以picker视图为基础，在该视图下面弹出下拉框

• prompt string  设置picker的提示语(标题),在Android平台上面，模式设置成'dialog',显示弹出框的标题

          3.3.Picker使用实例

               ①.基础选择器控件实例:弹出框,实例代码如下:

<span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'use strict'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">;</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">import</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">React</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">AppRegistry</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Component</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">StyleSheet</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">from</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'react-native'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">;</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">var</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">PickerDemo</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">React</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">createClass</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">   getInitialState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">function</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">''</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">};</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">},</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  render</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">styles</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">container</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">选择器实例</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">width</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="lit" style="box-sizing: border-box; color: rgb(0, 102, 102);">200</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          selectedValue</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          onValueChange</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">)</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">setState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">})}></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Itemlabel</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Java"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"java"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Itemlabel</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"JavaScript"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"javaScript"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">>当前选择的是:{</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">);</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">});</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">const</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> styles </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">StyleSheet</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">create</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  container</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    flex</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="lit" style="box-sizing: border-box; color: rgb(0, 102, 102);">1</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    justifyContent</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'center'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    alignItems</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'center'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    backgroundColor</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'#F5FCFF'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">},</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">});</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">AppRegistry</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">registerComponent</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">(</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'PickerDemo'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">PickerDemo</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">);</span>

运行效果如下:

 

  ②.基础选择器控件实例:设置弹出框标题,实例代码如下:

<span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">var</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">PickerDemo</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">React</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">createClass</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">   getInitialState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">function</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">''</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">};</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">},</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  render</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">styles</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">container</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">选择器实例</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          prompt</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"请选择编程语言"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">width</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="lit" style="box-sizing: border-box; color: rgb(0, 102, 102);">200</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          selectedValue</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          onValueChange</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">)</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">setState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">})}></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Itemlabel</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Java"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"java"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Itemlabel</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"JavaScript"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"javaScript"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">>当前选择的是:{</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">);</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">});</span>

运行效果如下:

 ③.基础选择器控件实例:设置下拉选择框,实例代码如下:

<span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">var</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">PickerDemo</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">React</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">createClass</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">   getInitialState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">function</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">''</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">,</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">};</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">},</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  render</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">()</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">return</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">styles</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">container</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          </span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">选择器实例</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          mode</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">'dropdown'</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          style</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={{</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">width</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="lit" style="box-sizing: border-box; color: rgb(0, 102, 102);">200</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          selectedValue</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          onValueChange</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">={(</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">)</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=></span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">setState</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">({</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">:</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">})}></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Itemlabel</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Java"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"java"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">          </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Itemlabel</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"JavaScript"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> value</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">=</span><span class="str" style="box-sizing: border-box; color: rgb(0, 136, 0);">"javaScript"</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"> </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">/></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Picker</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">        </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"><</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">>当前选择的是:{</span><span class="kwd" style="box-sizing: border-box; color: rgb(0, 0, 136);">this</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">state</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">.</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">language</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">Text</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">      </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);"></</span><span class="typ" style="box-sizing: border-box; color: rgb(102, 0, 102);">View</span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">></span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">    </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">);</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);">  </span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">}</span><span class="pln" style="box-sizing: border-box; color: rgb(0, 0, 0);"></span><span class="pun" style="box-sizing: border-box; color: rgb(102, 102, 0);">});</span>

运行效果如下: