如何在React Native中在Web中打开URI?

huangapple go评论85阅读模式
英文:

How to open URI in web in react native?

问题

代码

App.js

useEffect(() => {
    axios
        .get(
            `https://newsapi.org/v2/everything?q=bitcoin&apiKey=6529d29d039d45d591fc53ee553c0e92`
        )
        .then(response => {
            // console.log(response.data.articles)
            setNews(response.data.articles);
            setLoading(false)
        })
        .catch(error => {
            console.log(error);
            setLoading(true)
        });
}, []);



<ScrollView>
    {news.map((article) => (
        <>
            <Card containerStyle={styles.card}>
                <Card.Image key={article.urlToImage}
                    source={{ uri: !article.urlToImage ? "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDZLgldd2q0XXCd-lobijWU4aNMdPMfoaOKLxOTmdC&s" : article.urlToImage }}
                />
                <Card.Divider />
                <Text numberOfLines={2} style={{ textAlign: 'left', color: '#000', fontFamily: 'Lobster', fontSize: RFPercentage(3), marginBottom: verticalScale(5) }} key={article.title}>{article.title}</Text>

                <Text style={{ fontSize: RFPercentage(2.70), fontFamily: 'LobsterTwo-Bold', marginBottom: verticalScale(15) }} key={article.description} numberOfLines={3}>
                    {article.description}
                </Text>

                <Text key={article.author} style={{ fontFamily: 'LobsterTwo-Italic', fontSize: RFPercentage(2.30), marginBottom: scale(5), color: '#E02424' }}>
                    {article.author == null ? "Unknow Author" : article.author} on {new Date(article.publishedAt).toGMTString()}</Text>

                <TouchableOpacity
                    style={styles.cardbtn}
                >
                    <Text style={{ fontFamily: 'Lobster', color: '#fff', fontSize: RFPercentage(3) }}>Read More</Text>
                </TouchableOpacity>
            </Card>
        </>
    ))}
</ScrollView>

解释

数据已经成功获取。在数据中,article.url 包含了一个链接到完整新闻的链接,当我尝试点击 "Read More" 按钮时,它会重定向到一个谷歌页面,并打开 article.url 中的链接。

按钮

 <TouchableOpacity style={styles.cardbtn}>
      <Text style={{ fontFamily: 'Lobster', color: '#fff', fontSize: RFPercentage(3) }}>Read More</Text>
 </TouchableOpacity>

这是一个按钮,当我点击按钮时,它会重定向到谷歌并打开一个链接页面,就像示例一样,它可以工作,但在我的项目中不会打开任何链接。有人可以帮助我吗?

英文:

Code

App.js


useEffect(() =&gt; {
axios
.get(
`https://newsapi.org/v2/everything?q=bitcoin&amp;apiKey=6529d29d039d45d591fc53ee553c0e92`
)
.then(response =&gt; {
// console.log(response.data.articles)
setNews(response.data.articles);
setLoading(false)
})
.catch(error =&gt; {
console.log(error);
setLoading(true)
});
}, []);
&lt;ScrollView&gt;
{news.map((article) =&gt; (
&lt;&gt;
&lt;Card containerStyle={styles.card}&gt;
&lt;Card.Image key={article.urlToImage}
source={{ uri: !article.urlToImage ? &quot;https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDZLgldd2q0XXCd-lobijWU4aNMdPMfoaOKLxOTmdC&amp;s&quot; : article.urlToImage }}
/&gt;
&lt;Card.Divider /&gt;
&lt;Text numberOfLines={2} style={{ textAlign: &#39;left&#39;, color: &#39;#000&#39;, fontFamily: &#39;Lobster&#39;, fontSize: RFPercentage(3), marginBottom: verticalScale(5) }} key={article.title}&gt;{article.title}&lt;/Text&gt;
&lt;Text style={{ fontSize: RFPercentage(2.70), fontFamily: &#39;LobsterTwo-Bold&#39;, marginBottom: verticalScale(15) }} key={article.description} numberOfLines={3}&gt;
{article.description}
&lt;/Text&gt;
&lt;Text key={article.author} style={{ fontFamily: &#39;LobsterTwo-Italic&#39;, fontSize: RFPercentage(2.30), marginBottom: scale(5), color: &#39;#E02424&#39; }}&gt;
{article.author == null ? &quot;Unknow Author&quot; : article.author} on {new Date(article.publishedAt).toGMTString()}&lt;/Text&gt;
&lt;TouchableOpacity
style={styles.cardbtn}
&gt;
&lt;Text style={{ fontFamily: &#39;Lobster&#39;, color: &#39;#fff&#39;, fontSize: RFPercentage(3) }}&gt;Read More&lt;/Text&gt;
&lt;/TouchableOpacity&gt;
&lt;/Card&gt;
&lt;/&gt;
))}
&lt;/ScrollView&gt;

Explanation

data is successfully fetched. in the data article.url comes a link to the full news when I try to click the Read More button it redirects to a google page and opens the link to which one comes I'm article.url

Button

 &lt;TouchableOpacity style={styles.cardbtn}&gt;
&lt;Text style={{ fontFamily: &#39;Lobster&#39;, color: &#39;#fff&#39;, fontSize: RFPercentage(3) }}&gt;Read More&lt;/Text&gt;
&lt;/TouchableOpacity&gt;

here is a button when I click the button it redirects me to google and opens a link Page like this example it's working but in my project not open any link

anyone can help me?

答案1

得分: 1

在codeSandbox中查看示例代码,

希望这对您的问题有所帮助:
打开示例链接

在这个示例中,我从react-native包中导入了Linking API,该API提供了许多功能,用于处理HTTP链接。

我们可以使用openURL方法在外部浏览器中打开链接。

英文:

Check the sample code in codeSandbox,

Hope this helps you with your query:
Open link Example

In this example I have imported Linking api from react-native package,
which gives us many functionalities to work with http urls.

we can use openURL method to open url in external browser.

huangapple
  • 本文由 发表于 2023年2月26日 20:15:41
  • 转载请务必保留本文链接:https://go.coder-hub.com/75571903.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定