为什么WebView在React Native中没有打开？

Question

使用@ react-native-community / react-native-webview软件包（v ^ 8.1.2）在RN v0.61.5项目中打开Webview，无论我做什么，我都无法显示该Webview。我有一个打开它的按钮，但是什么也没有发生。没有从道具执行的错误函数，什么也没有。

这里是设置：

<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

没有错误在控制台中注册，没有新的错误视图呈现。

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

编辑：链接到小吃：https://snack.expo.io/uTkqnGbny

Answer 1

删除整个样式，仅需附带源代码：uri

Answer 2

为什么要在onpress中使用webview？

您可以通过这种方式使用

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() {
  return (
    <View style={styles.container}>
      <TouchableOpacity 
        style={{ height: height, width: width , backgroundColor:'#333', borderRadius: 50, alignSelf: 'center'}} 
        onPress={() => {

        }}
      > 
      <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);
              }
            }}
          />
      </TouchableOpacity>
    </View>
  );
}

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