时间戳

首页 > 解决方案 > WebView 未在反应本机应用程序中显示

reactjs - WebView 未在反应本机应用程序中显示

问题描述

我正在处理本机反应的 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'

  }
  });

标签： reactjsreact-nativewebview

解决方案

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

推荐阅读