react-native学习之内置网页:webview

一个需求, 需要点击一个图片或者文字, 点击打开别的网页

如何实现呢:

1. 需要用TouchableOpacity的onPress事件, 来做点击事件
2. 用WebView来展示网页, 注意参数是uri, 而不是一般以为的url.

import { WebView } from "react-native-webview";

const App = ({previewUrl}:{previewUrl:string}) => {
const [open, setOpen] = React.useState(false);
const toggleOpen = () => {
   setOpen(!open);
}

return (
  <>
    <Row>
      <TouchableOpacity
        onPress={toggleOpen}
      >
        <Text>click to view</Text>
      </TouchableOpacity>
    </Row>
    {open && (
      <Row
        style={{
          height: open ? 500 : 0,
          overflow: open ? "scroll" : "hidden"
        }}
      >
        <WebView
          source={{
            uri: previewUrl
          }}
        />
      </Row>
    )}
  </>
)}