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

【问题标题】：How can I make a link in a nested Text element accessible in React Native?如何在 React Native 中访问嵌套的 Text 元素中的链接？
【发布时间】：2020-07-27 07:40:58
【问题描述】：

问题：我正在尝试使用 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>

在 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 辅助功能转子的人，这里是 link to information on iOS accessibility rotor Here is a link for the local/global context menu for accessibility on Android. 任何对此的建议将不胜感激。

【问题讨论】：

你找到解决办法了吗？
@Henrik 不，我还没有找到解决方案。如果您有任何建议，我会全力以赴。
我找到了这个，但它对我不起作用，也许对你有用？ callstack.com/blog/react-native-android-accessibility-tips

标签： android ios react-native accessibility

【解决方案1】：

我跟进了 cmets 中发布的链接 @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，以使屏幕阅读器将文本识别为链接，但仅在只有一个内联链接时才有效。

【讨论】：