react-native系列(16)組件補充篇：加載符號、範圍選擇、開關、狀態欄

這些都是一些官方組件，由於樣式上並不能完全自定義，一般不會直接用於實際項目中，但可以作爲設計屬性和結構組件時的一個參考例子，如入參的設計。

ActivityIndicator

顯示一個圓形的加載中提示符號。ActivityIndicator在實際應用中一般爲絕對佈局，居中顯示。

屬性	描述
style	用於設置佈局類型
animating	true | false，表示符號的顯示或隱藏，當爲true時表示顯示
size	large | small，表示符號的尺寸
color	符號的顏色

貼上代碼：

import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';

class ActivityIndicatorComp extends React.Component{
    render(){
        return(
            <View style={styles.containerStyle}>
                <View style={styles.layoutStyle} />
                <ActivityIndicator style={styles.indicatorStyle} animating={true} size="large" color="#EE5E7B" />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    containerStyle: {
        position:'absolute',
        width: '100%',
        height: '100%'
    },
    layoutStyle: {
        position:'absolute',
        width: '100%',
        height: '100%',
        backgroundColor: '#000000',
        opacity: 0.2
    },
    indicatorStyle: {
        position:'absolute',
        left:0,
        right:0, 
        top:0, 
        bottom:0,
        margin:'auto'
    }
});

export default ActivityIndicatorComp;

效果：

Slider

範圍值選擇組件，如音量控制。用法請看註釋，貼上代碼：

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

class SliderComp extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            slidervalue: 50
        };
    }

    _onChange = (value) => {
        this.setState({slidervalue:value});
    }

    _onSlidingComplete = (value) => {
        console.log('用戶鬆開滑塊了，當前值爲'+value);
    }

    render(){
        return(
            <View style={styles.container}>
                <Slider 
                    style={{width: 300, height: 50}} // 樣式，需要至少設置一個寬度
                    disabled={false} // 如果爲true，用戶就不能移動滑塊。默認爲false
                    minimumValue={0} // 滑塊的最小值（當滑塊滑到最左端時表示的值）。默認爲0。
                    maximumValue={100} // 滑塊的最大值（當滑塊滑到最右端時表示的值）。默認爲1。
                    thumbTintColor='red' // 滑塊的顏色(僅android有效)，ios使用thumbImage傳入一張靜態圖
                    minimumTrackTintColor="red" // 滑塊左側軌道的顏色。在iOS上默認爲一個藍色的漸變色。
                    maximumTrackTintColor="gray" // 滑塊右側軌道的顏色。在iOS上默認爲一個灰色的漸變色。
                    value={this.state.slidervalue} // 滑塊的值
                    onValueChange={this._onChange} // 在用戶拖動滑塊的過程中不斷調用此回調
                    onSlidingComplete={this._onSlidingComplete} // 用戶鬆開滑塊的時候調用此回調，無論值是否變化。回調值爲當前值
                    step={1} // 滑塊的步長，值應該在0到(maximumValue - minimumValue)之間，默認值爲0
                />
                <Text>當前選擇的value：{this.state.slidervalue}</Text>
            </View>
        );
    }
}

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

export default SliderComp;

效果：

Switch

開關組件，無法通過寬高調整大小，只能用scale來調整。用法請看註釋，貼上代碼：

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

class SwitchComp extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            value: false
        };
    }

    _onValueChange = (value) => {
        this.setState({value});
    }

    render(){
        return(
            <View style={styles.containerStyle}>
                <View style={styles.switchViewStyle}>
                    <Text>是否打開WIFI：</Text>
                    <Switch
                        style={styles.switchStyle}
                        disabled={false} // 如果爲true則禁用此組件的交互
                        value={this.state.value} // 表示此開關是否打開。默認爲false（關閉狀態）
                        onValueChange={this._onValueChange} // 當值改變的時候調用此回調函數，參數爲新的值
                        trackColor={{'false':'gray','true':'green'}} // 開啓和關閉狀態時的背景顏色
                        thumbColor="white" // 開關上圓形按鈕的背景顏色。在iOS上設置此顏色會丟失按鈕的投影。
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    containerStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    switchViewStyle: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    switchStyle: {
        marginLeft: 20,
        transform: [{scale: 2}]
    }
});

export default SwitchComp;

效果：

StatusBar

手機屏幕頂部的狀態欄。用法請看註釋，貼上代碼：

import React from 'react';
import {    
    StyleSheet,
    View,
    StatusBar,
    Text,
    Button
} from 'react-native';

class StatusBarComp extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            animated: true,
            hidden: false,
            backgroundColor:'white',
            barStyle: 'dark-content',
            translucent:false,
            networkActivityIndicatorVisible:false,
            showHideTransition:'fade',
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    animated={this.state.animated} // 指定狀態欄的變化是否應以動畫形式呈現。
                    barStyle={this.state.barStyle} // 設置狀態欄文本的顏色。枚舉類型：'default'|'light-content'|'dark-content'
                    hidden={this.state.hidden} // 是否隱藏狀態欄
                    backgroundColor={this.state.backgroundColor} // (android)狀態欄的背景色
                    translucent={this.state.translucent} // (android)指定狀態欄是否透明。設置爲true時，應用會延伸到狀態欄之下繪製（即所謂“沉浸式”——被狀態欄遮住一部分）。常和帶有半透明背景色的狀態欄搭配使用
                    networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible} // (ios)指定是否顯示網絡活動提示符
                    showHideTransition={this.state.showHideTransition} // (ios)通過hidden屬性來顯示或隱藏狀態欄時所使用的動畫效果。默認值爲'fade'
                />
                <View style={styles.viewStyle}>
                    <Text>動畫過渡：</Text>
                    <Button 
                        title={this.state.animated ?'禁用動畫':'使用動畫'} 
                        onPress={() => { this.setState({ animated:!this.state.animated }); }}
                    />
                </View>
                <View style={styles.viewStyle}>
                    <Text>隱藏/顯示：</Text>
                    <Button 
                        title={this.state.hidden?'顯示':'隱藏'} 
                        onPress={() => { this.setState({ hidden:!this.state.hidden }); }}
                    />
                </View>
                <View style={styles.viewStyle}>
                    <Text>設置背景色(android)：</Text>
                    <Button title='紅色' onPress={()=>{this.setState({backgroundColor:'red'});}}/>
                    <Button title='藍色' onPress={()=>{this.setState({backgroundColor:'blue'});}}/>
                    <Button title='灰色' onPress={()=>{this.setState({backgroundColor:'gray'});}}/>
                </View>
                <View style={styles.viewStyle}>
                    <Text>狀態欄了佔位(透明時不佔位置,android)：</Text>
                    <Button 
                        title={this.state.translucent?'不透明':'透明'} 
                        onPress={()=>{this.setState({translucent:!this.state.translucent});}}
                    />
                </View>
                <View style={styles.viewStyle}>
                    <Text>設置文本樣式：</Text>
                    <Button title='default' onPress={()=>{this.setState({barStyle:'default'})}}/>
                    <Button title='light-content' onPress={()=>{this.setState({barStyle:'light-content'});}}/>
                    <Button title='dark-content' onPress={()=>{this.setState({barStyle:'dark-content'});}}/>
                </View>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                    <Text>顯示或隱藏動畫效果(ios)：</Text>
                    <Button title='fade' onPress={()=>{this.setState({showHideTransition:'fade'});}}/>
                    <Button title='slide' onPress={()=>{this.setState({showHideTransition:'slide'});}}/>
                </View>
            </View>
        );
    }
}

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

export default StatusBarComp;

效果：

Alert

系統通知彈窗，實際上是通過Modal組件封裝而成。用法請看註釋，貼上代碼：

import React from 'react';
import { View, Button, Alert } from 'react-native';

// 提示對話框（系統默認樣式），也可以通過Modal組件自定義構建界面實現同樣效果
class AlertAPI extends React.Component {
    _openAlert = () => {
        Alert.alert(
            '提示',
            '是否允許App上傳錯誤數據？',
            [
              {text: '稍後詢問我', onPress: () => console.log('Ask me later pressed')},
              {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
              {text: '允許', onPress: () => console.log('OK Pressed')},
            ],  // 當數組有爲兩個對象時，爲取消和允許；當數組僅有一個對象時，爲允許。
            { cancelable: false }
        );
    }

    render(){
        return(
            <View>
                <Button 
                    onPress={()=>{
                        this._openAlert();
                    }}
                    title="打開Alert彈窗"
                />
            </View>
        );
    }
}

export default AlertAPI;

效果：