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

Kenda ·

更新时间:2024-09-20

· 794 次阅读

样式
在这里插入图片描述

``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 (
        )
}

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 (
          夜晚模式
          全屏模式
    );
  }
  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
  }
});