我将react-native与“ react-native-highcharts”库(1.0.2)一起使用。我需要打开工具提示中的链接。
在工具提示中,我有一个链接,我需要在浏览器中使用本机<a href="https://www.google.es/">Open link</a>
打开它。
import React, { Component } from "react";
import { View, ScrollView, Text, Image, ActivityIndicator, StyleSheet, Linking, Platform } from "react-native";
import ChartView from 'react-native-highcharts';
import { url_charts } from "../utils/config";
export default class ChartScreen extends Component {
constructor(props){
super(props);
this.state = {
series: [],
isLoading: false
}
}
async componentDidMount(){
this.setState({isLoading: true, series: []});
await this.load_chart();
this.setState({isLoading: false});
}
load_chart = async () => {
// Load the series and points from the endpoint
let url = `${url_charts}?parameters`;
await fetch(url, { method: "GET" })
.then((response) => response.json())
.then((response) => {
let series = [];
// Get the data
// ...
this.setState({ series: series});
})
.catch((error) => {
// Catch the error if occur
});
};
render(){
let Highcharts = "Highcharts";
let config = {
chart: {
type: "line",
animation: Highcharts.svg,
borderRadius: 10,
marginTop: 40,
marginBottom: 30,
marginRight: 20,
marginLeft: 50,
zoomType: "xy",
panning: true,
resetZoomButton: {
position: {
x: 0,
y: -30
},
theme: {
style: {
width: 'auto',
fontSize: 10
}
}
}
},
title: "",
xAxis: {
type: "datetime",
tickPixelInterval: 60
},
yAxis: {
title: "",
plotLines: [{
value: 0,
width: 1,
color: "#808080"
}],
tickPixelInterval: 60
},
plotOptions: {
series: {
stickyTracking: false,
},
},
tooltip: {
followTouchMove: false,
useHTML: true,
style: {
pointerEvents: 'auto'
},
backgroundColor: "#FFF",
borderRadius: 20,
formatter: function () {
let extras = this.point.extras;
if(extras.name === undefined) {
this.tooltip.hide();
}
return `<div>
<!-- Example to open https://www.google.es/ on click a link -->
<a href="#" onclick="Linking.openURL('https://www.google.es/')">open google</a>
<!-- End example-->
</div>`;
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: this.state.series,
credits: {
enabled: false
}
};
const options = {
global: {
useUTC: true
},
lang: {
decimalPoint: ",",
thousandsSep: "."
}
};
return (
<View style={styles.graph}>
<ChartView
style={styles.high_charts}
originWhitelist={['']}
config={config}
options={options}
/>
</View>
)
}
}
预期结果是,当我单击工具提示的链接时,将打开带有URL https://www.google.es/的浏览器。