react-native系列(16)组件补充篇：加载符号、范围选择、开关、状态栏

短命女 2021-09-18 10:58 199阅读 0赞

这些都是一些官方组件，由于样式上并不能完全自定义，一般不会直接用于实际项目中，但可以作为设计属性和结构组件时的一个参考例子，如入参的设计。

# ActivityIndicator #

显示一个圆形的加载中提示符号。ActivityIndicator在实际应用中一般为绝对布局，居中显示。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>style</p> </td> 
   <td>用于设置布局类型</td> 
  </tr> 
  <tr> 
   <td> <p>animating</p> </td> 
   <td>true | false，表示符号的显示或隐藏，当为true时表示显示</td> 
  </tr> 
  <tr> 
   <td> <p>size</p> </td> 
   <td> <p>large |&nbsp;small，表示符号的尺寸</p> </td> 
  </tr> 
  <tr> 
   <td> <p>color</p> </td> 
   <td>符号的颜色</td> 
  </tr> 
 </tbody> 
</table>

贴上代码：

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;

效果：

![20190309224938474.gif][]

# 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;

效果：

![20190309231518331.gif][]

# 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;

效果：

![2019030923301324.gif][]

# 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;

效果：

![2019030923420254.gif][]

# 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;

效果：

![20190309234720832.gif][]

[20190309224938474.gif]: /images/20210812/64bfc271b4e24d5b8f85a8f5ac13431f.png
[20190309231518331.gif]: /images/20210812/eaab925d3d18496aaf67c29860bbf1f7.png
[2019030923301324.gif]: /images/20210812/3d310bd1af584503a31e2635703e1377.png
[2019030923420254.gif]: /images/20210812/a5aa842bdc9c4881b9c69114edcaf4fa.png
[20190309234720832.gif]: /images/20210812/207131bc47a943b3b2c9fb9e2202e395.png