如何通过按下 expo 中的按钮来加载 webview 内容？我必须使用导航吗？

Posted 2023-05-07

【中文标题】如何通过按下 expo 中的按钮来加载 webview 内容？我必须使用导航吗？

【英文标题】：How can I load webview content by pressing a button in expo?do I have to use navigation?

【发布时间】：2021-09-07 18:47:48

【问题描述】：

如何通过在 expo 中按下按钮来加载 webview 内容？我必须使用导航吗？

import * as React from 'react';
import  WebView  from 'react-native-webview';
import View from 'react-native'
export default function App()
    return (
      <View>
      <Button title='CLICK' onPress=()=> <WebView source=uri:'https://www.google.com'/>>
      </View>
    )

【参考方案1】：

您应该使用一个称为“状态”的概念。它们在 React 的官方文档中有很好的解释。基本上你必须声明一个可变变量，然后用按钮改变它。当检测到状态变化时，React 会重新渲染相应的组件。并且当它被重新渲染时，该特定变量的新值被读取并发生相应的变化。这是一个满足您期望目的的代码 sn-p：

import * as React from "react";
import  WebView  from "react-native-webview";
import  View, Button  from "react-native";

export default function App() 
    const [isVisible, setIsVisible] = React.useState(false);

    return (
        <View
            style= flex: 1, justifyContent: "center", alignItems: "center" 
    >
        // on press, whatever the older value of isVisible was, set it to its opposite, eg. toggle it 
        <Button
            title="click"
            onPress=() => setIsVisible((prev) => !prev)
            color="blue"
        />
        // if isVisible is true, render the WebView
        isVisible && (
            // you probably will want to change WebView's styles
            <WebView
                style= width: 300, height: 250 
                source= uri: "https://www.google.com" 
            />
        )
    </View>
);