reactjs - 为什么反应原生的WebView没有打开?
问题描述
使用@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
解决方案
这是我的零食代码
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,
},
});
推荐阅读
- python - Pickle 转储多个变量并在另一个目录的另一个文件中读取它们
- visual-studio-code - VSCode:更改未选择事件的背景颜色
- android-studio - 是否可以从 CLI 生成 Android 启动器图标?
- javascript - 如何优雅地检查连续物体的存在
- maven - PMD maven 插件 html 报告 - 如何获得摘要?
- matlab - 从 HSI 转换为 RGB
- php - 如何将数组传递到教义原始查询中的 IN 语句中?
- linux - 为什么编辑 .fini_array 不会改变程序的进程?
- sql-server - 面向初学者的 VS 代码中的 SQL 服务器
- reactjs - 当我更改页面时,React Router Dom 删除 vales