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

创建一个Modal（或者只是一个位置为绝对的View组件）比深入研究本机代码要好得多。

https://facebook.github.io/react-native/docs/0.56/modal

Answer 2

您可以实现dialog container，并在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组件通过在类导出之外（在import语句附近）添加此行来隐藏警告：

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

Answer 3

您需要按以下方式安装“ react-native-dialogs”（用于材料设计对话框的android唯一模块）：

1]安装：

npm install react-native-dialogs --save

2]链接：

react-native link react-native-dialogs

3]将其导入您的页面：

import DialogAndroid from 'react-native-dialogs';

还需要在渲染器中添加以下代码：

<Button title="show custom alert" onPress={this.showCustomAlert} />

最后在屏幕上添加以下功能：

showCustomAlert() {
   DialogAndroid.alert('Alert', `This is a link <a 
     href="https://www.google.com/">Google</a>`, {
    contentIsHtml: true
   });
}

您可以在这里https://github.com/aakashns/react-native-dialogs

中找到更多详细信息

Answer 4

使用React-Native附带的链接模块可以实现。请查看以下内容：

Display hyperlink in React Native App

如果这不起作用，可以试试这个npm包：

https://www.npmjs.com/package/react-native-hyperlink

在React Native Alert中显示超链接？

4 个答案: