Question

出于某种原因，我的反应本地webview根本没有显示出来。我的文本字段后没有显示任何内容。这是我的代码

import React, { Component } from 'react';


import {
View,
Text,
WebView,

} from 'react-native';


export default class Home extends Component {

    render() {
        return (
        <View style={{flexDirection:'column'}}>
          <Text>Show webview</Text>
          <WebView source={{html:"<html><body style='color:red'>Hello<br/>This is a test</body></html>"}} style={{width:200,height:200,backgroundColor:'blue',marginTop:20}} />
        </View>
        );
  }
}

我做错了什么？

Answer 1

将csproj添加到您的flex: 1组件。

<View />

Here's a demo

Answer 2

根据ReactNative docs（截至2019年11月），他们说：

Warning Please use the react-native-community/react-native-webview fork of this component instead. To reduce the surface area of React Native, <WebView/> is going to be removed from the React Native core. For more information, please read The Slimmening proposal.

我无法在我的Expo应用程序中使ReactNative <WebView/>完全正常工作。因此，切换到react-native-community / react-native-webview <WebView/>组件对我来说很有效。希望对您有所帮助！

Answer 3

尝试一下：

import { WebView } from 'react-native-webview';

export default AppWebview = () => (
      <View style={styles.container}>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/MhkGQAoc7bc'}}
          style={styles.video}
        />
        <WebView
          source={{uri: 'https://www.youtube.com/embed/PGUMRVowdv8'}}
          style={styles.video}
        />
      </View>
    );
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',

  },
  video: {
    marginTop: 20,
    maxHeight: 200,
    width: 320,
    flex: 1
  }
});

Answer 4

我已经使用 webview 在 react native 应用程序中显示seats.io 图表，但 webview 未在 release apk 中加载。下面是我的代码。

render() {
    return (
      <View style={{ flex: 1, backgroundColor:'yellow',alignSelf: 'stretch'}}>
        <WebView
          ref={(r) => (this.webRef = r)}
          originWhitelist={['*']}
          source={{ html: this.html() }}
          style={{ width: 320, height: 300 }}
          domStorageEnabled={true}
          javaScriptEnabled={true}
          // injectedJavaScriptBeforeContentLoaded={this.pipeConsoleLog()}
          onMessage={this.handleMessage.bind(this)}
        />
      </View>
    );
  }

本地反应原点webview不会出现

4 个答案: