对WebView上的本机组件作出反应，不能正确呈现
对WebView上的本机组件作出反应，不能正确呈现
提问于 2019-03-19 11:51:47
我有一个组件，它在屏幕顶部和底部呈现一个WebView和一个文本组件：
return (
<Container>
<Text>TEXT TOP</Text>
<WebView source={{uri: url}} />
<Text>TEXT BOTTOM</Text>
</Container>
);我面临的问题是，当我第一次导航到特定组件时，“文本顶部”不会出现，而“文本底部”则会显示得很好。为了使顶部的文本出现，我需要执行以下操作之一：
- 导航到另一个组件并返回
- 改变电话的方向
- 与WebView交互(滚动或按下输入字段)
我尝试使用来自'react-native'的WebView组件和来自'react-native-webview'的组件，但没有改变行为。
回答 3
Stack Overflow用户
发布于 2019-03-19 12:35:29
我有这个例子，它将文本同时呈现在顶部和底部，同时在middle.Hope中呈现webview，helps.Run，这段代码在Expos符上，并在您的设备上查看。
import * as React from 'react';
import { Text, View, StyleSheet, WebView } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to
get a shareable url.
</Text>
<WebView source={{ uri: 'https://github.com/facebook/react-native' }} />
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to
get a shareable url.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});Stack Overflow用户
发布于 2019-05-22 22:54:53
我也有过类似的问题。WebView之上的任何组件都不会呈现，并且在WebView完成加载之前不能强制呈现。
我能够通过让WebView加载本地html资源(source = require('xxx'))来解决这个问题。然后实现WebView的onLoadEnd，以翻转一个组件状态变量来加载您想要显示的实际URI。
屏幕的布局似乎被WebView的第一个负载延迟或以其他方式阻碍了。我不知道第一个页面是本地的，是否会导致引擎内联地计算布局，因为它不需要等待异步获取结果。
我不清楚为什么屏幕的布局需要根据WebView的内容进行更改。也许看起来就是这样。
Stack Overflow用户
发布于 2020-01-06 16:53:07
使用绝对值将所有其他内容放置在WebView和位置下面。我试着解决这个问题已经有一段时间了，发现这个解决方案很有魅力！
<WebView source={{uri: url}} style={{ marginTop: 60 }} />
<Text style={{ position: 'absolute', top: 0, height: 60 }}>TEXT TOP</Text>
<Text>TEXT BOTTOM</Text>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55240424
复制相关文章
相似问题
腾讯云开发者
