反应本机 Web 视图未显示

由于某种原因，我的反应原生网络视图根本没有显示。我的文本字段后没有显示任何内容。这是我的代码

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

我做错了什么？

将flex: 1添加到<View />组件中。

<View style={{flex: 1, 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>

这是一个演示

根据截至（2019 年 11 月）的 ReactNative 文档，他们是这样说的：

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.

我根本无法在我的世博会应用程序中使用 ReactNative <WebView/>。因此，切换到 react-native-community/react-native-webview <WebView/>组件对我很有用。我希望这有所帮助！

试试这个：

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

相关内容

最新更新

热门标签：