WebView 未在反应本机应用程序中显示答案

【问题标题】：WebView is not displaying in react native appWebView 未在反应本机应用程序中显示
【发布时间】：2019-09-26 05:29:02
【问题描述】：

我正在使用 react native 开发 webview。 Webview 未显示。我已经为 webview 设置了代码。这是我也添加了样式的更新代码。在 webview 之后，我添加了 facebook 登录按钮。Webview 应该比 facebook 登录按钮先显示。但我没有在我的屏幕上看到 webview。

     render() {
     return (
     <View style={styles.container}>
              <Text>Show webview</Text>

      <WebView
      source = {{uri : 'google.com'}}
     style={{
      height: '100%',
      width: '100%',
      position: "absolute",
      top: 20,
      left: 0,
      alignItems: "baseline",
      bottom: 0,
      right: 0
      }}
      />

     {this.state.avatar_url ?
      <Image
        source={{ uri: this.state.avatar_url }}
        style={styles.imageStyle} /> : null}

      <Text style={styles.text}> {this.state.user_name} </Text>

     <LoginButton
      readPermissions={['public_profile']}
      onLoginFinished={(error, result) => {
        if (error) {
          console.log(error.message);
          console.log('login has error: ' + result.error);
        } else if (result.isCancelled) {
          console.log('login is cancelled.');
        } else {
          AccessToken.getCurrentAccessToken().then(data => {
            // result1 = await AuthUtils.loginFB();

            console.log("ijrfu");

            console.log(data.accessToken.toString());

          Alert.alert(data.accessToken.toString());
            const processRequest = new GraphRequest(
              '/me?fields=name,picture.type(large)',
              null,
              this.get_Response_Info

            );
            // Start the graph request.
            new GraphRequestManager().addRequest(processRequest).start();

          });
        }
        }}
       onLogoutFinished={this.onLogout}
       />

      </View>
      );
      }
      }
     const styles = StyleSheet.create({
     container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    },

   text: {
   fontSize: 20,
   color: '#000',
   textAlign: 'center',
   padding: 20
   },

  imageStyle: {

  width: 200,
 height: 300,
 resizeMode: 'contain'

  }
  });

【问题讨论】：

这段代码有错误吗？
没有错误我没有收到任何错误。
尝试将 flex: 1 添加到您的 WebView 样式中。
你能看到我你的视图风格吗？

标签： reactjs react-native webview

【解决方案1】：

您的网络视图 URI 中有两次 https:// 并关闭您的 View 元素。

用这个替换你的代码。

 render() {
return (
  <View style={styles.container}>
    <Text>Show webview</Text>

    <WebView
      source={{ uri: 'https://www.google.com/' }}
      style={{ marginTop: 20 }}
    />
  </View>
);

}

在您的父 View 样式中添加flex:1，如下所示..

 const styles = StyleSheet.create({
  container: {
    flex: 1,
    ....
  },

【讨论】：

【解决方案2】：

 <View style={{ height: '100%', width: '100%' }}>
                <Text>Show webview</Text>

                <WebView
                    source={{ uri: 'https://www.google.com' }}
                    style={{  height: '100%',
            width: '100%',
            position: "absolute",
            top: 20,
            left: 0,
            alignItems: "baseline",
            bottom: 0,
            right: 0}}
                />
            </View>

【讨论】：

能否请您发送整个代码或您编写的样式
对不起，我没有得到你。

【解决方案3】：

如果您在 iOS 上进行测试，您可能需要在 WebView 上添加 useWebKit 属性。它将使用 WKWebView 而不是 UIWebView。

【讨论】：