android - 如何在 React Native 中访问嵌套的 Text 元素中的链接？

Question

问题:我正在尝试使用 React Native 在 Android 和 iOS 上都可以访问链接。 iOS 在使用 VoiceOver 时有一个转子，它可以在屏幕上的链接之间切换，但不适用于以下元素:

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

当使用“链接”选项在启用 TalkBack 的情况下搜索屏幕上的链接时，Android 上也会发生同样的事情。在上面的代码示例中，在 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 辅助功能转子的人，这里是 link to information on iOS accessibility rotor Here is a link for the local/global context menu for accessibility on 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，以使屏幕阅读器将文本识别为链接，但仅在只有一个内联链接时才有效。