样式

react-native利用Switch控制手机状态栏_reactjs

``animated动画
使用方式：比如要一个View组件产生动画效果用一个Animated.View组件代替View，里面正常写内容，然后需要发生变化的样式的值要用Animated.Value()指定，设置一个函数用来更改该样式的值来产生动画效果，
如果要让View的宽度从100在1000毫秒内变成300可以这样

//先定义一个值保存需要变化的样式的值
this.state = {
    width: new Animated.Value(100)
}
//函数配置动画效果
changeWidth = () => {
    Animated.timing(this.state.width,{ //第一个参数是需要更改的值，第二个是动画相关配置
        toValue: 300, //变到300
        duration: 1000, // 1000毫秒
        useNativeDriver: false //是否使用原生，默认false，但是不写有警告，看着烦
    }).start()//开始，就当是固定写法
}

render () {
    return (
            <View onPress={this.changeWidth}>
                <Animated.View
                    style={{
                        width:this.state.width
                    }}
                >
                </Animated.View>
            </View>
        )
}

Switch 配合 StatusBar
开关组件和手机状态栏配置组件
通过开关控制状态栏的显示隐藏，是否沉浸式，背景颜色…

沉浸式就是状态栏下面还显示app内容

import React, {Component} from 'react';
import {View, Text, Switch, StyleSheet, StatusBar} from 'react-native';
export default class main extends Component {
  constructor (props) {
    super(props);
    this.state = {
      switchValue: false,
      thumbColor: '#fff',
      hidden: false,
      barStyle: 'default',
      switch2Value: false,
      thumbColor2: '#fff',
    };
  }
  render () {
    return (
      <View>
        <View style={styles.wrap}>
          <Text>夜晚模式</Text>
          <Switch
            value={this.state.switchValue}
            onValueChange={this.ValueChangeBarStyle.bind(this)}
            thumbColor={this.state.thumbColor}
            trackColor={{false: '#ccc', true: '#333'}}
          />
        </View>
        <StatusBar hidden={this.state.hidden} barStyle={this.state.barStyle} />
        <View style={styles.wrap}>
          <Text>全屏模式</Text>
          <Switch
            value={this.state.switch2Value}
            onValueChange={this.ValueChangeHidden.bind(this)}
            thumbColor={this.state.thumbColor2}
            trackColor={{false: '#ccc', true: '#333'}}
          />
        </View>
        <StatusBar
          hidden={this.state.hidden}
          barStyle={this.state.barStyle}
          backgroundColor='transparent'
          translucent={ true }
        />
      </View>
    );
  }
  ValueChangeBarStyle (boolean) {
    this.setState({
      switchValue: boolean,
      barStyle: boolean ? 'dark-content' : 'light-content',
      thumbColor: boolean ? '#000' : '#fff',
    });
    if (boolean) this.props.changeBGC('#999');
    else this.props.changeBGC('#fff');
  }
  ValueChangeHidden (boolean) {
    this.setState({
      switch2Value: boolean,
      hidden: boolean,
      thumbColor2: boolean ? '#000' : '#fff',
    });
  }
}
const styles = StyleSheet.create({
  wrap: {
    flexDirection: 'row',
    backgroundColor: 'transparent',
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: 40,
    borderTopColor: '#ccc',
    borderTopWidth: 1
  }
});

最后如果本文对你有用的话欢迎你关注我的公众号，会有各种技术栈的文章

react-native利用Switch控制手机状态栏_状态栏_02