Question

我有一个在屏幕的顶部和底部呈现WebView以及Text组件的组件：

return (
        <Container>
            <Text>TEXT TOP</Text>
            <WebView source={{uri: url}} />
            <Text>TEXT BOTTOM</Text>
        </Container>
);

我面临的问题是，当我第一次导航到特定组件时，“文本顶部”没有出现，而“文本底部”似乎很好。为了使顶部文字显示，我需要执行以下操作之一：

导航到另一个组件并返回
更改手机的方向
与WebView交互（滚动或按下输入字段）

我尝试使用'react-native'和'react-native-webview'的WebView组件，但都没有改变其行为。

Answer 1

我有这个示例，它在顶部和底部同时显示文本以及Webview 希望对您有所帮助。在expo快餐上运行此代码，然后在您的设备上查看。

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',
  },
});

Answer 2

我有一个类似的问题。在WebView加载完成之前，WebView上方的任何组件都不会渲染，也不会被强制渲染。

我能够通过使WebView加载本地html资源（source = require（'xxx'））来解决此问题。然后实现WebView的onLoadEnd来翻转组件状态变量以加载要显示的真实URI。

似乎屏幕的布局被WebView的第一次加载延迟或以其他方式受阻。我不知道第一页是否在本地导致引擎计算内联布局，因为它不需要等待异步获取结果。

我不清楚为什么要根据WebView的内容更改屏幕布局。也许看起来就是这样。

Answer 3

将所有其他内容放在WebView下方，并使用绝对位置。我尝试解决这个问题已有一段时间了，发现此解决方案像个护身符！

        <WebView source={{uri: url}} style={{ marginTop: 60 }} />
        <Text style={{ position: 'absolute', top: 0, height: 60 }}>TEXT TOP</Text>
        <Text>TEXT BOTTOM</Text>

WebView上方的React Native组件无法正确呈现

3 个答案: