为什么 React Native 中的 WebView 打不开？

Question

使用@react-native-community/react-native-webview包（v^8.1.2）在RN v0.61.5项目中打开webview，无论我做什么，按下按钮后都无法显示webview .我有一个打开它的按钮，但没有任何反应。 none 执行的 props 的错误函数，没有。

设置如下：

<Components.Button
    style={{ marginLeft: 15 }}
    text={"It's Copied. Continue"}
    type={'primary'}
    onPress={() => (
        <WebView
            style={{ flex: 0, height: height, width: width }}
            containerStyle={{ flex: 0, height: height, width: width }}
            automaticallyAdjustContentInsets={true}
            ref={(ref) => (this.webview = ref)}
            source={{ uri: 'https://connect.stripe.com/oauth/authorize?response_type=code&client_id=<....>&scope=read_write' }}
            originWhitelist={['https://*']}
            renderError={(error) => <View style={{ flex: 1 }}><Text>{error}</Text></View>}
            onError={syntheticEvent => {
                const { nativeEvent } = syntheticEvent;
                console.warn('WebView error: ', nativeEvent);
            }}
            onNavigatorStateChange={(event) => {
                if (event.url !== this.props.stripeUri) {
                    this.webview.stopLoading();
                    Linking.openURL(event.url);
                }
            }}
        />
    )}
/>

如您所见，我尝试过的方法：

设置flex:0具有指定的高度，宽度
使用通配符将 uri 列入白名单
设置各种错误道具
重新运行pod install

控制台中没有错误记录，没有新的错误视图呈现。

我上次查看这段代码时它运行良好，但不确定发生了什么。有什么想法吗？

编辑：link 吃零食：https://snack.expo.io/uTkqnGbny

Answer 1

删除整个样式并使用源：uri

Answer 2

这是我的零食代码

https://snack.expo.io/sfDcMtiIR

代码：

import * as React from "react";
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Linking,
  Dimensions,
} from "react-native";
import { WebView } from "react-native-webview";
import Constants from "expo-constants";
const { height, width } = Dimensions.get("window");
const testURI = "https://google.com";

export default function App() {
  const [isShowWebView, setIsShowWebView] = React.useState(false);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={{
          height: 50,
          width: "100%",
          borderRadius: 50,
          justifyContent:"center",
          alignItems:"center"
        }}
        onPress={() => setIsShowWebView(!isShowWebView)} >
        <Text>Open Webview</Text>
      </TouchableOpacity>

      {isShowWebView && (
        <WebView
          style={{ height: height, width: width }}
          containerStyle={{ height: height, width: width }}
          ref={(ref) => (this.webview = ref)}
          source={{ uri: testURI }}
          renderError={(error) => (
            <View style={{ flex: 1 }}>
              <Text>{error}</Text>
            </View>
          )}
          onError={(syntheticEvent) => {
            const { nativeEvent } = syntheticEvent;
            console.warn("WebView error: ", nativeEvent);
          }}
          onNavigatorStateChange={(event) => {
            if (event.url !== testURI) {
              this.webview.stopLoading();
              Linking.openURL(event.url);
            }
          }}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
});

Answer 3

我想我知道你想要什么。

我创建了一个状态变量来使用按钮切换网络视图。

请尝尝我的点心（使用Android或iOS）。

https://snack.expo.io/lYItc9ACk

代码：

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Linking, Dimensions } from 'react-native';
import { WebView } from 'react-native-webview'
import Constants from 'expo-constants';
const {height, width} = Dimensions.get('window');
const testURI = "https://google.com";

export default function App() {
  const [showWebView, setShowWebview] = React.useState(false);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={{width:'90%', height: 50, backgroundColor:'#333', borderRadius: 50, alignSelf: 'center'}} 
        onPress={() => setShowWebview(!showWebView)}
      >
      </TouchableOpacity>

      { !!showWebView &&
        <WebView
          style={{ flex: 1, height: height, width: width }}
          containerStyle={{ flex: 1, height: height, width: width }}
          ref={(ref) => (this.webview = ref)}
          source={{ uri: testURI }}
          renderError={(error) => (
            <View style={{ flex: 1 }}><Text>{error}</Text></View>
          )}
          onError={syntheticEvent => {
            const { nativeEvent } = syntheticEvent;
            console.warn('WebView error: ', nativeEvent);
          }}
          onNavigatorStateChange={(event) => {
            if (event.url !== testURI) {
              this.webview.stopLoading();
              Linking.openURL(event.url);
            }
          }}
        />
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

为什么 React Native 中的 WebView 打不开？

Why is WebView in react native not opening?

webview

reactjs

wkwebview

react-native