React Native android真机运行时候 界面一片空白

最新推荐文章于 2023-04-08 15:01:26 发布
原创 最新推荐文章于 2023-04-08 15:01:26 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#native

本文记录了一个关于 React Native 在 Android 真机上运行时遇到的问题：初始化后界面显示为空白的情况。作者尝试了修改应用权限并开启了悬浮窗权限。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

React Native android真机运行时候 初始化之后啥也没有改 
界面一片空白

修改应用权限 悬浮框权限打开



react-native入门之 win10+android 真机运行
蛐蛐的博客
03-25 381
文档：https://reactnative.cn/docs/running-on-device 1.开启USB调试 在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP。 首先，确定你已经打开设备的 USB 调试开关。 2.连接设备 使用adb devices命令： List of devices attached 2a1f5d57 device emulator-5554 device ...
React-Native环境搭建：Android真机调试（小米手机miui10系统）
wudith的专栏
01-21 1335
主要参考官网的步骤来进行安装，但官网介绍的和最新版本的RN还是有一些差异，总结了一些自己的心得体会。
react-native 开发时ios模拟器上可以正常显示的列表 在android真机上一片空白的原因
hzxOnlineOk的博客
04-16 507
记录一个react-native开发app的一个常见坑。。。老是会忘记 ** 现象 ** 在ios模拟器上可以显示的列表，但是在android上是一片空白，什么都看不到 原因 排查到了原因是，一个列表容器忘记添加flex: 1了，<View style={{ flex: 1 }}>… ...
在小米手机上调试react-native白屏问题
soapcoder92的博客
08-08 2014
测试环境：MIUI7 安装应用：MyProject 首先，打开手机设置应用，点击进入设置界面。 接下来，在设置应用中，选择“其他应用管理”选项。 接下来，打开选择已经安装的应用，选择“MyProject”。 接下来，点击“权限管理”，进入权限管理界面。 最后，点击“显示悬浮窗”这个权限，将该权限设置为允许。
【React Native 学习笔记】React Native For Android程序白屏
安好_勿念
04-12 1293
第一次运行React Native For Android程序，如果发现程序时白屏的，像网上说的报错都没有，而且怎么摇也没有见到Reload JS的弹窗，如下图 解决方案：           1.在手机设置中开启手机悬浮窗权限，           2.然后在后台停止该应用，是不是就发现出现了报错的界面 而且摇一摇也好使了      这时候你就应该知
React Native Android 真机调试白屏错误
qq_40934679的博客
02-05 2085
问题叙述: 在运行后出现长时间白屏，多次reload后无反应。 解决方法： 进入手机的设置=》找到应用程序中自己的App=》更改其权限管理（全部允许）即可。 有时还需要退出App，再次进入即可。
Android问题笔记十四：解决WebView白屏空白的九种方案，AutoSize？
热门推荐
空名先生
04-08 2万+
解决webview空白的几种实现方式。
React Native的Android开发调试环境搭建-真机版
小陈的博客
10-25 1180
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
React Native 真机断点调试+跨域资源加载出错问题的解决方法
08-28
React Native 真机断点调试+跨域资源加载出错问题的解决方法 React Native 是一个基于 React 的框架，可以用来开发移动应用程序。然而，在使用 React Native 进行真机断点调试时，可能会遇到跨域资源加载出错的问题...
react-native-v8：React Native Android的可选V8运行时
02-05
该项目的目的是为React Native支持V8运行时。 作为选择加入的软件包设计，它应该易于与现有的React Native项目集成。 与React Native集成 为了简化RN集成，我们将预构建的AAR发布到。 版本控制与React Native一致，...
React Native真机红屏报错总结
weixin_30648587的博客
11-01 212
一、run-android报错：unable to load script from assets 'index.android.bundl' 解决： 1.进入\android\app\src\main 2.新建assets文件夹 3.执行 react-native bundle --platform android --dev false --entry-file index.js...
【React Native】使用React-Navigation遇到的坑
weixin_34112181的博客
03-07 139
按照React-Navigation官网文档进行操作，发现一直报RNGestureHandlerModule.Direction类中为空，找了一下午答案，翻遍了谷歌，stackoverflow没找到解决办法。 在五点的时候添加第三方库的时候发现react-native-gesture-handler需要部分React库。按照说明把缺少的库补全，终于跑起来了。以后安装库时需要注意warning信...
react native开发过程中，运行android程序屏幕没有任何显示问题
ddddwwww2的博客
11-26 839
运行app以后，在真机上没有看到任何内容，这个时候应该是出错了，只是我们没有看到， 可以在设置里查看app的权限管理页面，开启悬浮框，然后在运行app就可以看到是什么问题了。
react native启动白屏终极解决方案
kimi
04-15 1万+
新公司采用React Native开发，所以就顺利入坑了… React Native启动白屏是一个很普遍但又很严重的问题，网上也有很多文章，这里就此问题，从分析到常用的解决方案做一个简单的总结。 先看图，白屏的现象: 图中手机为ZTE星星2号(专用测试机，为嘛？因为公司没给配啊,还有自己买的，所以就是专用的喽),Andriod 4.4的，可以看到白屏现象很严重，最后用自己的华为mate9...
React Native 添加启动屏教程，React Native启动白屏解决方案
fengyuzhengfan的专栏
09-30 1万+
问题描述： 用React Native架构的无论是Android APP还是iOS APP，在启动时都出现白屏现象，时间大概1~3s（根据手机或模拟器的性能不同而不同）。 问题分析： 为什么会产生白屏？ React Native应用在启动时会将js bundle读取到内存中，并完成渲染。这期间由于js bundle还没有完成装载并渲染，所以界面显示的是白屏。
React Native 12 WebView显示空白
sinat_33758988的博客
03-17 2520
今天打算接高德地图的导航API但是用官方的Webview发现安卓完全载不出来，看了很多种办法也没有用，之后仔细一看发现一个WARNING Warning Please use the react-native-community/react-native-webview fork of this component instead. To reduce the surface area of Re...
react native怎么真机开发
最新发布
04-02
### React Native 真机调试方法及配置教程 #### Android 平台下的真机调试 为了在 Android 设备上进行 React Native 的真机调试，可以按照以下方式操作： 1. **启用开发者模式并开启 USB 调试功能** 首先，在目标设备上激活开发者选项，并确保启用了 USB 调试功能。这一步对于连接物理设备至关重要。 2. **启动 Metro Bundler 和应用服务** 使用命令 `react-native start` 启动 Metro Bundler[^1]。此工具负责打包 JavaScript 文件以便于移动应用程序加载它们。 3. **安装 APK 到设备** 运行命令 `react-native run-android` 将编译后的 APK 安装到已连接的安卓设备上。如果一切正常，则会在真实硬件上看到正在运行的应用程序实例。 4. **摇晃设备进入开发菜单** 当应用处于前台时，轻轻摇晃手机即可触发开发设置界面弹出。通过该菜单可以选择不同的调试选项，比如远程调试 (Remote Debugging)[^4]。 5. **选择 Remote JS Debugger** 在上述提到的开发菜单里找到 “Debug JS Remotely”，点击之后默认浏览器将会跳转至指定 URL 如 http://localhost:8081/debugger-ui/[^4] 来实现更直观便捷的日志查看与断点设定等功能支持。 #### iOS 平台下的真机调试 针对苹果生态系统的 iPhone/iPad 用户而言，执行如下步骤完成相应的准备工作同样重要： 1. **Xcode 设置签名证书** 打开 Xcode 工程文件 (.xcworkspace)，确认团队信息填写无误并且选择了有效的 Apple ID 或企业账号作为 Code Signing Identity[^3]。 2. **部署到实际装置而非模拟器** 修改 Scheme 下 Target Device 为具体的 iOS 物理终端名称而不是 Generic Devices or Simulators。 3. **同步网络 IP 地址给客户端知晓** 如果是在局域网环境下工作的话，请务必告知前端部分服务器端确切位置即当前电脑所处子网内的 IPv4 数字串形式表示法代替 localhost 表达含义[^4]。 以下是用于初始化 TypeScript 类型定义项目的参考指令片段： ```bash npx react-native init AwesomeTSProject --template react-native-template-typescript ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值