首页 > 其他分享 >React Native expo项目设置app顶部的状态栏

React Native expo项目设置app顶部的状态栏

时间:2023-10-31 11:06:25浏览次数:44  
标签:react 状态栏 app dispatch React import native isDebugger


 

React Native expo项目设置app顶部的状态栏_Network

 

React Native expo项目设置app顶部的状态栏_Network_02

 

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { getRouter } from './config'
import { ErrorBoundary } from '../component/light'
import VDebug, { initTrace, setExternalContext } from 'react-native-vdebug'
import { View } from 'react-native'
import { connect } from 'react-redux'
import { StatusBar } from 'expo-status-bar'

const Stack = createNativeStackNavigator()

function Router(props) {
  // Before component Render, perform Proxy Console/Network (Optional)
  initTrace()

  // Context object when the command is executed (Optional)
  setExternalContext('your context')
  return (
    <ErrorBoundary>
      <StatusBar style="auto" hidden={false} backgroundColor='#f6f6f6' />
      <Stack.Navigator initialRouteName="Index">{getRouter()}</Stack.Navigator>
      {props.isDebugger ? (
        <View>
          <VDebug
            // Info panel (Optional)
            info={{ obj: 'your object' }}
          />
        </View>
      ) : null}
    </ErrorBoundary>
  )
}

const mapStateToProps = (state) => {
  return {
    isDebugger: state.getIn(['light', 'isDebugger']),
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onSetState(key, value) {
      dispatch({ type: 'SET_LIGHT_STATE', key, value })
    },
    onDispatch(action) {
      dispatch(action)
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Router)

backgroundColor='#ff0000' 

React Native expo项目设置app顶部的状态栏_Network_03

 hidden={true}

React Native expo项目设置app顶部的状态栏_react native_04

 

参考链接:

https://docs.expo.dev/versions/latest/sdk/status-bar/#installation

StatusBar · React Native 中文网 


标签:react,状态栏,app,dispatch,React,import,native,isDebugger
From: https://blog.51cto.com/xutongbao/8102481

相关文章

  • 教育管理工具类 APP 在智慧校园中的应用探究?
    智慧校园是指利用信息化技术,将学校的管理、教育教学等方面进行整合和优化,实现校园运行的智能化和高效化。在智慧校园建设中,教育管理工具类APP发挥着重要的作用。本文将详细探究教育管理工具类APP在智慧校园中的应用,并从以下几个方面进行介绍:一、招生与报名管理教育管理工具类A......
  • 【Azure Function App】如何修改Azure函数应用的默认页面呢?
    问题描述当在Azure中创建了一个函数应用(FunctionApp)后,访问默认URL会得到一个默认的页面。是否有办法修改这个默认页面呢?  问题解答在之前的博文中,介绍了修改AppService的默认页面。1:【Azure应用服务】AppService默认页面暴露Tomcat版本信息,存在安全风险 :https://www.cnbl......
  • python最新采集京东app商品详情数据(2023-10-30)
    一、技术要点: 1、cookie可以从手机app端用charles抓包获取; 2、无需安装nodejs,纯python源码; 3、商品详情接口为:functionId="wareBusiness"; 4、clientVersion="10.1.4"同时也支持更高的版本; 5、sign签名算法已转成python源码;#-*-coding:UTF-8-*-importreques......
  • 安卓app开发注意事项及部分源码分享
    随着智能手机的普及,安卓app开发已成为当今的热门领域,在开发过程中,为了提高app的质量和用户体验,需要注意一些关键事项,同时掌握部分源码也是非常必要的。一、安卓app开发注意事项1、安全问题在安卓app开发中,安全问题至关重要,用户数据泄露、恶意等安全问题会给用户带来严重损失,为了确......
  • python采集京东app搜索商品数据(2023-10-30)
    摘要:   python采集京东app搜索商品数据(2023-10-30)一、技术要点: 1、cookie可以从手机app端用charles抓包获取; 2、无需安装nodejs,纯python源码; 3、搜索接口为:functionId=search; 4、clientVersion="10.1.4"同时也支持更高的版本; 5、sign签名算法已转成pyth......
  • 管理类App开发步骤及部分源码分享
    随着移动互联网的快速发展,企业对于管理类App的需求也在不断增加,管理类App可以帮助企业实现更高效、更便捷的管理和协作,同时也可以提高员工的工作效率和生产力。一、需求分析在开发管理类App之前,需要进行充分的需求分析,这个阶段主要是明确App的开发目标和用户需求,包括用户群体、功能......
  • 大逃杀斗猿场app软件开发解决方案
      一、大逃杀概述  大逃杀斗猿场是一款全新游戏玩法,玩家在平台中挖掘资源,合成卡片,竞技比赛等娱乐方式。软件开发的解决方案主要是以用户体验,功能完善,后期软件的开发易于扩展,以满足用户需求并实现业务目标。  二、软件分析  1.软件注册登录界面:提供注册功能,收集......
  • uniapp实现路由拦截
    背景在APP中,跳转页面需要判断是否有权限跳转,比如是否登录。开发环境是TMUI+VUE3+TS,这难免有一些限制,在网上搜索后,发现简书网站有个博主写的链接正合我意,不过他的是JavaScript+uniapp原生开发,根据我的需求,自己稍微改了些。0x01复制代码简书博客链接:https://www.jianshu.com/p/b......
  • 彻底搞懂Reactor模型和Proactor模型
    在高性能的I/O设计中,有两个著名的模型:Reactor模型和Proactor模型,其中Reactor模型用于同步I/O,而Proactor模型运用于异步I/O操作。想要了解两种模型,需要了解一些IO、同步异步的基础知识,点击查看服务端的线程模型无论是Reactor模型还是Proactor模型,对于支持多连接的服务器,一般......
  • 去哪里找开发app的人呢
    找开发APP的人或团队,有以下几种途径:在招聘网站上发布招聘信息。找技术团队。在互联网上搜索技术团队或者开发公司。1:华盛恒辉科技有限公司上榜理由:华盛恒辉是一家专注于高端软件定制开发服务和高端建设的服务机构,致力于为企业提供全面、系统的开发制作方案。在......