如何在网站中嵌入重定向网址?(在React Native中)

nnvyjq4y  于 2023-02-13  发布在  React
关注(0)|答案(4)|浏览(164)

我想把这段文字整合到我的应用程序“https://www.google.com“中。当我们点击它时,我会希望移动的浏览器打开并显示网站。如何做到这一点?我是新手,任何帮助都将不胜感激。

<TouchableOpacity>
<View>
    <Text style={{color: 'grey', fontSize: 17, fontFamily:'Arial', fontStyle: 'bold', textAlign: 'center', 
    marginTop: 6, marginLeft: 25, marginBottom: 20}}> 
                https://www.google.com/
    </Text>
  </View>
</TouchableOpacity>
aij0ehis

aij0ehis1#

根据官方React Native Linking documentation
如果您使用的是托管expo-cli工作流,请参阅Expo文档中有关Linking的指南,以获取适当的替代方案。
这页上写着:
WebBrowser通常是更好的选择,因为它是应用内的一种模态,用户可以轻松地关闭它并返回到您的应用。
所以你也可以用这个:

<Text style={{
  color: 'grey',
  fontSize: 17,
  fontFamily:'Arial',
  fontStyle: 'bold',
  textAlign: 'center', 
  marginTop: 6,
  marginLeft: 25,
  marginBottom: 20
 }}
 onPress = {() => {WebBrowser.openBrowserAsync('https://google.com')}}> 
</Text>
bqf10yzr

bqf10yzr2#

你不需要在视图和TouchableOpacity中环绕文本,因为文本本身有onPress属性。避免不必要的元素嵌套。

<Text style={{color: 'grey',
 fontSize: 17,
 fontFamily:'Arial',
 fontStyle: 'bold',
 textAlign: 'center', 
        marginTop: 6,
 marginLeft: 25,
 marginBottom: 20}}
 onPress = {() => {Linking.openURL('https://google.com')}}> 
  https://www.google.com/ /* Whatever appropriate text you want to display */
  </Text>
n9vozmp4

n9vozmp43#

我不知道这是否仍然是一个选项,但在过去我使用这个https://github.com/obipawan/react-native-hyperlink
当然,工作的解决方案是分裂你的文本和链接部分,把这样的

<Text onPress={ ()=> Linking.openURL('https://google.com') } >Google.com</Text>
41ik7eoe

41ik7eoe4#

您可以使用React Native公开的Linking组件

Step#01导入链接组件

import { Linking } from 'react-native';

Step#02将其与组件的onPress属性一起使用。

<Pressable onPress={() => Linking.openURL('https://google.com')} />

相关问题