首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >React应用程序未在react-native-webview内渲染

React应用程序未在react-native-webview内渲染
EN

Stack Overflow用户
提问于 2020-11-25 02:43:16
回答 1查看 84关注 0票数 0

我计划在react-native-webview中展示我的react应用程序。我实现了WebView的代码。当我放入URL https://www.w3schools.com时,它工作得很好。但是当我使用我的react app URL https://jshossen.com/时,它没有渲染任何东西。它只显示一个白色屏幕。有谁能帮我在WebView中运行React应用程序吗?

这是我的代码示例:

代码语言:javascript
复制
import React from 'react';
import { StyleSheet, StatusBar, Platform, View } from 'react-native';
import { WebView } from 'react-native-webview';

const App: () => React$Node = () => {
  return (
    <View style={styles.topContainer}>
      <View style={styles.container}>
        <WebView
          // source={{ uri: 'https://www.w3schools.com/' }}
          source={{ uri: 'https://jshossen.com' }}
          scalesPageToFit={true}
          javaScriptEnabled={true}
          startInLoadingState={true}
        />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    height: '100%', 
    width: '100%',
  },
  topContainer: {
    flex: 1,
    paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
  }
});


export default App;
EN

回答 1

Stack Overflow用户

发布于 2020-11-25 02:48:29

代码语言:javascript
复制
<WebView source={{ uri: url }} 
          style={{ resizeMode: 'cover', flex: 1 }}
          injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=width, initial-scale=1, maximum-scale=1, user-scalable=2.0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
          scalesPageToFit={false}
        />

This should work, please have a test
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64992885

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档