如何将重定向网址嵌入网站？ （在React Native中）

Question

我想将此文本集成到我的应用程序“ 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>

Answer 1

我不知道这是否仍然是一种选择，但过去我使用了这个https://github.com/obipawan/react-native-hyperlink

确定有效的解决方案是拆分文本和链接部分，像这样

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

Answer 2

由于Text本身具有onPress属性，因此不需要将Text包裹在View中，然后包裹在TouchableOpacity中。避免不必要的元素嵌套。

<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>

Answer 3

根据官方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>