Question

我正在使用React Native开发Webview。 Webview没有显示。我已经为webview设置了代码。这是更新的代码，我也添加了sytle。在Webview之后，我添加了Facebook登录按钮.Webview应该比Facebook登录按钮先显示。但是我的屏幕上没有Web视图。

     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'

  }
  });

Answer 1

 <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>

Answer 2

您的网页视图URI中有两次 https：// ，并关闭您的 View 元素。

以此替换您的代码。

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

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

}

以如下所示的父级查看样式添加flex:1。

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

Answer 3

如果您正在iOS上进行测试，则可能必须在WebView上添加useWebKit道具。它将使用WKWebView代替UIWebView。

WebView未显示在React Native应用中

3 个答案: