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

最新推荐文章于 2022-10-17 15:33:29 发布

黄泽平

最新推荐文章于 2022-10-17 15:33:29 发布

阅读量684

点赞数 2

分类专栏：前端集合 react-native 文章标签： rn Switch rn slider

本文链接：https://blog.csdn.net/zeping891103/article/details/88372732

版权

前端集合同时被 2 个专栏收录

153 篇文章 10 订阅

订阅专栏

react-native

25 篇文章 8 订阅

订阅专栏

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

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;

效果：