英文:
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(() => {
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>
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
<TouchableOpacity style={styles.cardbtn}>
<Text style={{ fontFamily: 'Lobster', color: '#fff', fontSize: RFPercentage(3) }}>Read More</Text>
</TouchableOpacity>
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论