React Native 加载URL时如何从WebView获取标题

wixjitnu  于 2023-03-03  发布在  React
关注(0)|答案(4)|浏览(357)

我想在react-native中从webView获取网址的标题。
例如:我可以从iOS中的webView获取URL的标题

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    titleLabel.text = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}

到目前为止我还没有找到任何解决办法,所以有人有什么想法吗?

lo8azlld

lo8azlld1#

我不确定这是否是最干净的解决方案,但您可以向WebView中注入一些JavaScript来获取一些数据,然后将其传递回来。

handleMessage(message) {
  console.log(message.nativeEvent.data);
}

render() {
  return (
    <WebView
      source={{ uri: "https://wonderloveapp.com" }}
      injectedJavaScript="window.postMessage(document.title)"
      onMessage={this.handleMessage}
    />
  )
}

参考文献:

  • https://facebook.github.io/react-native/docs/webview.html#injectedjavascript
  • https://facebook.github.io/react-native/docs/webview.html#onmessage
pdsfdshx

pdsfdshx2#

您可以使用injectJavaScriptinjectedJavaScript prop 将Javasctipt代码注入到您加载的URL并获取页面标题。请查看this answer以了解如何使用javascript获取tile。
然后当你获得头衔时,你可以使用onMessage prop 传递到React原生方。

ni65a41a

ni65a41a3#

存在包含title属性的NativeEvent。https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onloadstart

<WebView
  source={{
    uri: route.params.url,
  }}
  onLoadStart={(event) => {
    navigation.setOptions({
      headerTitle: event.nativeEvent.title, // get webpage title
    });
  }}
></WebView>
xqkwcwgp

xqkwcwgp4#

下面是如何创建一个浏览器屏幕,在使用webview的同时,使用react钩子将标题和url放在标题中。

import React from "react";
import { useEffect } from "react";
import { useState } from "react";
import { Text } from "react-native";
import { View, SafeAreaView, ActivityIndicator } from "react-native";
import { WebView } from "react-native-webview";
const BroswerScreen = ({ route, navigation }) => {
  const { url } = route.params;
  const [isLoading, setLoading] = useState(true);
  const [title, setTitle] = useState(null)
  const [urlHeader, setUrlHeader] = useState(null)

  useEffect(() => {
    console.log(title)
    console.log(urlHeader)
    console.log(isLoading)
    if(title && urlHeader){
      navigation.setOptions({
        headerStyle: { height: 100 },
        headerTitle: ()=> (
        <View>
          <Text numberOfLines={1} style={{fontSize: 16, fontWeight: "bold"}}>{title}</Text>
          <Text numberOfLines={1}>{urlHeader}</Text>
        </View>)
      });
    }

  }, [title,urlHeader, isLoading]);
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "white" }}>
      <WebView
        startInLoadingState={true}
        renderLoading={() => {
          return <Spinner />;
        }}
        style={{ flex: 1 }}
        source={{ uri: url }}
        injectedJavaScript= "window.ReactNativeWebView.postMessage(document.title)"
        onMessage={(message) => setTitle(message.nativeEvent.data)}
        onNavigationStateChange={(event) => {setTitle(event.title); setUrlHeader(event.url); setLoading(false)}}
      />
    </SafeAreaView>
  );
};
const Spinner = () => {
  return (
    <View
      style={{
        flex: 1,
        height: "100%",
        width: "100%",
      }}
    >
      <ActivityIndicator color={"blue"} size="large" />
    </View>
  );
};
export default BroswerScreen;

您可以使用类似于以下内容的方法转到此屏幕

onPress(
      navigation.navigate(BROWSERSCREEN, {
        url: "https://www.mylink.com",
      })
    )

相关问题