如何在 React Native 中访问嵌套文本元素中的链接？

Question

问题：我正在尝试使用 React Native 在 Android 和 iOS 上创建一个可访问的链接。使用 VoiceOver 时，iOS 有一个转子，可以选择在屏幕上的链接之间切换，这对以下元素不起作用：

<Text>
Here is some text <Text accessible={true} accessibilityRole="link" onPress={() => Linking.openURL("https://www.google.com")}> Here is a link</Text>
</Text> 

在 Android 上使用链接选项在启用 TalkBack 的情况下搜索屏幕上的链接时会发生同样的事情。在上面的代码示例中，在 Android 中双击打开 TalkBack 时不会打开链接，但在 iOS 中双击打开 VoiceOver 的句子可以打开链接。

我试过的事情：我试过像这样拆分 Text 元素：

<View>
  <Text> Here is some text</Text>
  <Text accessible={true} accessibilityRole="link" onPress={() => Linking.openURL("https://www.google.com")}> Here is a link </Text>
</View>

这确实解决了 Android 上的问题，我可以双击链接并打开网页，当我打开 TalkBack 的链接选项时，它还允许我将其作为链接轻弹，但这不是最佳策略，因为它扰乱了我对视力正常的用户的句子格式。这也不会将链接项添加到 iOS 转子。鉴于这是一个可访问性问题，我还没有找到很多关于如何解决此问题的资源。

结论：我希望能够在链接位于 Android 上的嵌套文本元素中时单击该链接，并且我希望 TalkBack 上的链接控件能够正常工作。我还想在 iOS 上为转子添加链接选项。对于那些不熟悉 iOS 辅助功能转子的人，这里是 iOS 辅助功能转子信息 的链接这里是 Android 上辅助功能的本地/全局上下文菜单的链接。对此的任何建议将不胜感激。

Answer 1

我跟进了@verunar 在评论中发布的链接，发现这很可能是文本元素中内联链接的最佳答案。

这是代码：

 <Text
      accessibilityRole="link"
      onPress={() =>
        AccessibilityInfo.isScreenReaderEnabled().then(
          enabled =>
            enabled && openURL('https://callstack.com/team/lukasz-walczak/'),
        )
      }>
      Check my activity on 
      <Text
        onPress={() => openURL('https://callstack.com/team/lukasz-walczak/')}
        style={styles.link}>
        Callstack's 
      </Text>
      webpage
    </Text>
 

基本上，它会检查屏幕阅读器是否打开，如果打开，则整个文本元素将打开 URL。如果屏幕阅读器不在，则只有实际的链接文本才会将您导航到链接的站点。这适用于 Android 和 iOS，让屏幕阅读器将文本识别为链接，但仅当只有一个内联链接时才有效。