引入react-native-webview后，无法正常显示，整个页面白屏

[licong325]

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import {WebView} from 'react-native-webview';
export default function index() {
return (
<WebView
source={{
uri: 'https://h5.dolilive.com/doli-h5-page/dev/20/index.html#/weeklyStar',
}}
scalesPageToFit={true}
allowsInlineMediaPlayback={true}
onLoadStart={() => {
console.log('WebView加载开始');
}}
onLoadEnd={() => {
console.log('WebView加载结束');
}}
style={{borderWidth: 1, borderColor: 'red', width: 100, height: 100}}
/>
);
}

const styles = StyleSheet.create({});

两个回调都可以正常执行，但页面是白屏
日志如下： LOG Running "rn_first_project" with {"rootTag":31}
LOG WebView加载开始
LOG WebView加载结束

这是页面：

[licong325]

解决了，朋友们注意避坑，外面一定要套元素，要不然无法显示！！！

[sunnylqm]

这种布局问题首先都可以通过 inspector 来定位

[licong325]

这种布局问题首先都可以通过 inspector 来定位

我尝试了使用浏览器调试来检查，但是页面还是白屏，引入的页面的代码加载了，不知道什么原因，找不到解决办法，最后看了源码才知道需要套一个元素来控制webview的大小和显示

[sunnylqm]

inspector不在浏览器里，在开发者菜单里 https://reactnative.cn/docs/react-devtools#integration-with-react-native-inspector

[licong325]

多谢，我复现了一下问题，用inspector调试，页面上一片空白没有任何元素可以选择，不过还是多谢你告诉我方法，下次碰到问题就可以用这种方式了

[sunnylqm]

这个用于判断是组件布局问题，还是组件内部问题，具体到你这里就是是这个元素压根都没有预期的宽高呢，还是页面有了预期的宽高，但内部渲染不对
既然inspector捕捉不到它，那么必然首先是布局问题，类似这样的需要额外布局容器的情况在RN里是很多的
类似的做法我们还可以给元素style={{borderColor:'red', borderWidth: 1}} 这样的方式，看它是否有预期的红色轮廓，是否在我们预期的位置和大小，是不是被别的元素挡住了，等等
我看到你用了这种方式，但既然没有看到任何红色轮廓，那么其实第一时间就应该反应到，它其实压根没有分配到位置，布局没有撑开

[tgwstyle]

兄弟，能看看你的环境变量怎么配的的吗？我配置之后还抱这个

[sunnylqm]

doctor的输出不准确也不重要，不必在意