本文將介紹三個常用的元件Picker、Switch、Slider，它們都是官方提供的，並且均可以在android與ios渲染對應的原生元件。這三個元件的使用很簡單，在實戰開發中也很常見，因此這裡放在一起介紹。

Picker選擇器

Picker選擇器，通常可用作下拉選單，城市選擇器等。
其使用方法如下：

import React, { Component } from 'react';
import { AppRegistry, Text, View,Picker } from 'react-native';

export default class PickerDemo extends Component {
    constructor(props) {
        super(props);
        this
 
.state ={
            language:null,
        };
    }

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

效果圖

屬性方法

Switch開關按鈕

Switch開關，用於開/關兩種狀態的選擇元件。
其使用方法如下：

  import React, { Component } from 'react';
import { AppRegistry, Text, View,Switch,StyleSheet } from 'react-native';

export default class SwitchDemo extends Component {
    constructor(props) {
        super(props);
        this.state ={
            switchState1: true,
            switchState2: false,
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <Switch style={{marginTop:10, marginBottom:10, backgroundColor:'transparent'}}
                        value={this.state.switchState1}
                        onValueChange={ (value) => this.setState({switchState1:value}) }
                        onTintColor='red'
                        thumbTintColor='yellow'
                        tintColor='orange'
                />
                <Switch value={this.state.switchState2}
                        onValueChange={ (value) => this.setState({switchState2:value})}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'white',
        flex: 1
    },
});

效果圖

屬性方法

Slider滑動條

Slider滑動條，用於選擇一個範圍值的元件。
其使用方法如下：

import React, { Component } from 'react';
import { AppRegistry, Text, View,Slider,StyleSheet } from 'react-native';

export default class SwitchDemo extends Component {
    constructor(props) {
        super(props);
        this.state ={
            value:0,
        };
    }
    render() {
        return (
            <View style={{flex:1}}>
                <Slider />
                <Slider disabled={true}/>
                <Slider value={0.3} maximumTrackTintColor='black'/>
                <Slider value={0.4} minimumTrackTintColor='red'/>
                <Slider value={0.5} style={{borderWidth:1,borderColor:'red'}}/>
                <Text>{this.state.value}</Text>
                <Slider minimumValue={5} maximumValue={20} onValueChange={(value)=>{this.setState({value:value})}} onSlidingComplete={(value)=>{this.setState({value:value})}}/>
                <Slider thumbTintColor="red"  step={0.2}/>
            </View>
        );
    }
}

效果圖

屬性方法