轉載請標明出處：

(一)前言

       【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org 

      今天我們一起來看一下Switch選擇開關控制元件以及Picker選擇器控制元件的介紹完全解析以及最佳實踐。

剛建立的React Native技術交流3群(496508742),React Native技術交流4群(458982758)，請不要重複加群！歡迎各位大牛,React Native技術愛好者加入交流!同時部落格左側歡迎微信掃描關注訂閱號,移動技術乾貨,精彩文章技術推送!

(二)Switch選擇開關控制元件

         2.1.

         2.2.Switch屬性方法介紹(這邊只介紹平臺通用屬性以及只適合Android平臺上面的屬性方法)

• View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
• disabled bool 如果該值為true,使用者就無法點選switch開關控制元件，預設為false
• onValueChange function 方法，當該元件的狀態值發生變化的時候回撥方法
• value bool 該開關的值，如果該值為true的時候，開關呈開啟狀態，預設為false

          2.3.Switch使用例項

①.基礎Switch開關控制元件例項演示,新增點選開關狀態切換，例項程式碼如下:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Switch,
} from'react-native';
var SwitchDemo =React.createClass({
  getInitialState() {
    return {
      trueSwitchIsOn: true,
      falseSwitchIsOn: false,
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text>
           Swtich例項
        </Text>
        <Switch
          onValueChange={(value) =>this.setState({falseSwitchIsOn: value})}
         style={{marginBottom:10,marginTop:10}}
          value={this.state.falseSwitchIsOn}/>
        <Switch
          onValueChange={(value) =>this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn}/>
      </View>
    );
  }
});
const styles =StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
AppRegistry.registerComponent('SwitchDemo',() => SwitchDemo);
 

執行效果如下:

②.Switch開關控制元件設定無法點選狀態，該第一個Switch無法響應點選狀態,例項程式碼如下:

var SwitchDemo =React.createClass({
  getInitialState() {
    return {
      trueSwitchIsOn: true,
      falseSwitchIsOn: false,
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text>
           Swtich例項
        </Text>
        <Switch
          disabled={true}
          onValueChange={(value) =>this.setState({falseSwitchIsOn: value})}
         style={{marginBottom:10,marginTop:10}}
          value={this.state.falseSwitchIsOn}/>
        <Switch
          disabled={false}
          onValueChange={(value) =>this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn}/>
      </View>
    );
  }
});

效果執行如下:

(三)Picker選擇器控制元件

          2.1.該Picker渲染iOS和Android平臺上面的原生選擇器元件，官方例項程式碼如下:

<Picker
  selectedValue={this.state.language}
  onValueChange={(lang) =>this.setState({language: lang})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

         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使用例項

①.基礎選擇器控件例項:彈出框,例項程式碼如下:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Picker,
} from'react-native';
var PickerDemo =React.createClass({
   getInitialState: function() {
    return {
      language: '',
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text >
          Picker選擇器例項
        </Text>
        <Picker
          style={{width:200}}
          selectedValue={this.state.language}
          onValueChange={(value) =>this.setState({language: value})}>
          <Picker.Itemlabel="Java" value="java" />
          <Picker.Itemlabel="JavaScript" value="javaScript" />
        </Picker>
        <Text>當前選擇的是:{this.state.language}</Text>
      </View>
    );
  }
});
const styles =StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
AppRegistry.registerComponent('PickerDemo',() => PickerDemo);

執行效果如下:

②.基礎選擇器控件例項:設定彈出框標題,例項程式碼如下:

var PickerDemo =React.createClass({
   getInitialState: function() {
    return {
      language: '',
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text >
          Picker選擇器例項
        </Text>
        <Picker
          prompt="請選擇程式語言"
          style={{width:200}}
          selectedValue={this.state.language}
          onValueChange={(value) =>this.setState({language: value})}>
          <Picker.Itemlabel="Java" value="java" />
          <Picker.Itemlabel="JavaScript" value="javaScript" />
        </Picker>
        <Text>當前選擇的是:{this.state.language}</Text>
      </View>
    );
  }
});

執行效果如下:

③.基礎選擇器控件例項:設定下拉選擇框,例項程式碼如下:

var PickerDemo =React.createClass({
   getInitialState: function() {
    return {
      language: '',
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text >
          Picker選擇器例項
        </Text>
        <Picker
          mode={'dropdown'}
          style={{width:200}}
          selectedValue={this.state.language}
          onValueChange={(value) =>this.setState({language: value})}>
          <Picker.Itemlabel="Java" value="java" />
          <Picker.Itemlabel="JavaScript" value="javaScript" />
        </Picker>
        <Text>當前選擇的是:{this.state.language}</Text>
      </View>
    );
  }
});

執行效果如下:

(四)最後總結

今天我們主要學習一下Switch選擇開關控制元件以及Picker選擇器控制元件的介紹完全解析以及最佳實踐。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回覆一下。

       關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),專案管理以及部落格文章!(歡迎關注，第一時間推送精彩文章)

     關注我的微博，可以獲得更多精彩內容