• react-native针对android改变状态栏样式


    1.沉浸式,将状态栏放在导航栏里面,导航栏使用的是react-navigation

    import React from 'react';
    import {YellowBox,StatusBar} from "react-native"
    import {createAppContainer} from 'react-navigation';
    import {Provider} from 'react-redux'
    import {Provider as AliProvider} from "@ant-design/react-native";
    import store from './src/redux/store'
    import RootStack from './src/Router';
    import SplashScreen from 'react-native-splash-screen'

    // 忽略警告信息
    YellowBox.ignoreWarnings(['Warning: componentWillMount', 'Remote debugger is', 'Warning: componentWillReceiveProps', 'Warning: componentWillUpdate', 'Warning: ViewPagerAndroid']);
    const AppContainer = createAppContainer(RootStack);
    export default class App extends React.Component {
    componentDidMount() {
    // do stuff while splash screen is shown
    // After having done stuff (such as async tasks) hide the splash screen
    SplashScreen.hide();
    StatusBar.setTranslucent(true)
    StatusBar.setBarStyle("dark-content")
    Platform.OS==="android"&&StatusBar.setBackgroundColor("transparent")
    }

    render() {
    return (
    <Provider store={store}>
    <AliProvider>
    <AppContainer/>
    </AliProvider>
    </Provider>

    );
    }
    }
    2.改变状态栏颜色(针对路由,项目页面比多且状态栏主题颜色不一致)
    在App.js里
    function getActiveRoute(navigationState) {
    if (!navigationState) {
    return null;
    }
    const route = navigationState.routes[navigationState.index];
    // dive into nested navigators
    if (route.routes) {
    return getActiveRoute(route);
    }
    return route;
    }
    const AppNavigator = createStackNavigator(AppRouteConfigs);
    const AppContainer = createAppContainer(AppNavigator);export default () => (
    <AppContainer
    onNavigationStateChange={(prevState, currentState, action) => {
    const currentScreen = getActiveRoute(currentState);
    const prevScreen = getActiveRoute(prevState);
    if (prevScreen.routeName !== currentScreen.routeName) {
    if(currentScreen.routeName === 'Screen1')
    StatusBar.setBarStyle('dark-content')
    else
    StatusBar.setBarStyle('light-content')
    }
    }}
    />
    );
    在router.js里
    Screen1:{ screen:Screen1, params:{statusbar:’dark-content’} }
    Screen2:{ screen:Screen2, params:{statusbar:'light-content'} }
     

     

  • 相关阅读:
    tcp没用吗?为什么MOBA、“吃鸡”游戏不推荐用tcp协议
    这样做动画交互,一点都不费力!
    sql server 小记——分区表(上)
    vs中不得不会的一些小技巧(1)——细说查找
    Aforge.net之旅——开篇:从识别验证码开始
    Redis Hash操作
    Varint 数值压缩
    LevelDB Version
    LevelDB Cache机制
    LevelDB Compaction操作
  • 原文地址:https://www.cnblogs.com/xiaoleilei123/p/11720892.html
Copyright © 2020-2023  润新知