Question

React Native Webview允许您定义特定的数据检测器类型以包括指向这些类型的链接。在HTML文档包含电话号码（没有超链接标签）的情况下，没有迹象表明该电话号码是可点击的（请注意，当电话号码为时，我已经有逻辑链接到本机电话点击，以便该部分正常工作）。我有什么办法可以改变Web视图中这些检测到的可点击链接的样式，而不必解析通过API传递给我的HTML？

此外，该事件还以“ tel：”为开头将电话号码退回给我作为event.url，但是在该电话号码和实际电话号码之间还有一些特殊字符。确保被叫号码与html文本中的数字匹配的最佳方法是什么？

我还没有尝试过任何东西-我在官方react-native-webview文档中找不到有关如何执行此操作的任何内容，也没有在stackoverflow中找到任何内容。

        import { View, StyleSheet, Linking } from 'react-native';
        import { WebView as RNWebView } from 'react-native-webview';
        import { WebViewSourceHtml } from 'react-native- 
       webview/lib/WebViewTypes';
        import call from 'react-native-phone-call';

        type Props = {
          onHeightChange: (height: number) => void;
          height?: any;
          // TODO: Source is currently hard-coded for proof of concept.
          // Eventually, it will be the Html source as coming from the API.
          source?: WebViewSourceHtml;
          // TODO: until the API is in place, we might want to pass in the 
        message text and create
          // an 'html' file.
          text?: string;
        };

        class WebView extends Component<Props> {
          private webref: any = '';

          render() {
            const myPage: WebViewSourceHtml = {
          html:
            htmlHeader +
            '<span style="font-family:Verdana; font-size:10pt; color:rgb(0,0,0);">Links test...<br></span><span style="font-family:Verdana; font-size:10pt; color:rgb(0,0,0);"><br></span><span style="font-family:Verdana; font-size:10pt; color:rgb(0,0,0);">978-867-5309<br></span><span style="font-family:Verdana; font-size:10pt; color:rgb(0,0,0);"><br></span><a href="https://www.google.com" target="_blank"><span style="font-family:Verdana; font-size:10pt; `enter code here`color:rgb(0,0,0);">https:&#47;&#47;www.google.com</span></a>' +
            htmlFooter
        };

        return (
          <View style={[styles.bodyContent, { height: this.props.height ? this.props.height : 400 }]}>
            <RNWebView
              ref={r => (this.webref = r)}
              originWhitelist={['*']}
              source={this.props.source ? this.props.source : myPage}
              // note: setting this to false will enable pinch/zoom, but if set to true, this scales
              // the entire webview to fit the page, resulting in a very small initial view.
              scalesPageToFit={false}
              dataDetectorTypes={['link', 'phoneNumber']}
              onMessage={event => this.props.onHeightChange(parseInt(event.nativeEvent.data, 10) + 50)}
              // onMessage={event => console.log(event.nativeEvent.data)}
              javaScriptEnabled={true}
              incognito={true}
              onShouldStartLoadWithRequest={event => {
                if (event.url.slice(0, 4) === 'http') {
                  Linking.openURL(event.url);
                  return false;
                } else if (event.url.slice(0, 3) === 'tel') {
                  const callNumber = event.url.slice(4);
                  call({ number: callNumber, prompt: true }).catch(console.error);
                  return false;
                }
                return true;
              }}
              onLoadEnd={e => {
                if (this.webref) {
                  this.webref.injectJavaScript(
                    `window.ReactNativeWebView.postMessage
                      ( JSON.stringify(document.documentElement.clientHeight))`
                  );
                }
              }}
            />
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      bodyContent: {
        padding: 16
      }
    });

    const htmlHeader: string =
      `<html><head <meta name="viewport" ` +
      `content="width=device-width,initial-scale=1"></head><body>`;

    const htmlFooter: string = `</body></html>`;

    export { WebView };```

I just want to make the text look clickable so that users know they can click on the link to call the number, and safely extract the appropriate number from the event.url data.

有什么方法可以更改与列出的datadetector类型匹配的Web文档中项目的样式？

0 个答案: