在React Native Alert中显示超链接？

Question

我想使用Alert Api显示操作系统行为警报。我问自己是否可以在警报文本中显示超链接？

Alert.alert(
    'Alert', 
    'This is an Alert. I want to include hyperlinks here.',
    [
        {
            text: 'Cancel', 
            onPress: () => console.log("Alert cancel"),
            style: 'cancel',
        },
        {
            text: 'Accept', 
            onPress: () => console.log("Alert accept"),
            style: 'default'
        },
    ]
);

Answer 1

您可以实现一个对话框容器，并在 Dialog.Description onPress() 上使用 React Native Linking 组件将其转换为超链接：

<Dialog.Description onPress={() => Linking.openURL('https://www.google.com')} 
    style={{ textDecorationLine: 'underline', color: 'blue' }}>www.google.com</Dialog.Description>

或者您可以在 Dialog.Description 中添加一个 Text 组件以及其他一些文本，以便将某个单词作为超链接：

<Dialog.Description>
    Visit this website:
    <Text onPress={() => Linking.openURL('https://www.google.com')}
        style={{ textDecorationLine: 'underline', color: 'blue' }}>www.google.com</Text>
</Dialog.Description>

需要注意的是，您应该只将字符串传递给 Dialog.Description，并且执行上述操作将会给您一个控制台警告。因此，请谨慎使用，但它对我来说工作得很好，并且您可以通过在类导出之外添加此行（靠近导入语句），使用 React Native YellowBox 组件隐藏警告：

YellowBox.ignoreWarnings(['Failed prop type: Invalid prop `children` of type `array` supplied to `DialogDescription`, expected `string`'])