react-native - 使用 ref 的 setAccessibilityFocus 不起作用

Question

我在一堆组件上使用 ref 属性和 findNodeHandle 以便能够触发 AccessibilityInfo.setAccessibilityFocus。但是，它并不总是按预期工作。有时即使 componentDidMount 已执行，引用仍为 null。

我经常使用 setAccessibilityFocus 来聚焦出现在屏幕上的新元素的标题，例如在打开模式时。

重要提示:这是画外音/对讲功能，因此您需要在设备上激活该功能。

看我的零食:https://snack.expo.io/@insats/example-accessibilityinfo-setaccessibilityfocus-not-working

这是代码示例:

import React, { Component } from 'react';
import {
  View,
  Text,
  findNodeHandle,
  TouchableOpacity,
  AccessibilityInfo,
  StatusBar,
} from 'react-native';

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.accessibilityRef = null;
  }

  componentDidMount() {
    console.log('componentDidMount');
    this.setAccessibilityFocus();
  }

  setAccessibilityRef(el) {
    console.log('setAccessibilityRef', el);
    this.accessibilityRef = el;
  }

  setAccessibilityFocus() {
    console.log('setAccessibilityFocus', this.accessibilityRef);

    if (this.accessibilityRef) {
      const reactTag = findNodeHandle(this.accessibilityRef);
      AccessibilityInfo.setAccessibilityFocus(reactTag);
    }
  }

  render() {
    console.log('Rendering Sample');

    return (
      <Text ref={this.setAccessibilityRef}>
        This text ought to be read out loud by the screenreader if enabled
      </Text>
    );
  }
}

export default class App extends React.Component {
  state = {
    open: false,
  };

  toggle = () => this.setState({ open: !this.state.open });

  render() {
    return (
      <View style={{ margin: 50 }}>
        <StatusBar hidden />
        <TouchableOpacity
          style={{ backgroundColor: 'blue', padding: 20, marginBottom: 20 }}
          onPress={this.toggle}>
          <Text style={{ color: 'white' }}>
            {this.state.open ? 'Hide text' : 'Show text'}
          </Text>
        </TouchableOpacity>

        {this.state.open && <Sample />}
      </View>
    );
  }
}

Answer 1

我真的不明白是什么导致了这些问题。我发现调用 setAccessibilityFocus 两次可以解决问题。您也可以通过处理回调 ref 中的所有内容来简化聚焦逻辑。

例子:

export default () => {

    const setInitFocus = (element: React.Component | null) => {
        if (element == null) return;
        const elementId = findNodeHandle(element);
        if (elementId) {
            AccessibilityInfo.setAccessibilityFocus(elementId);
            AccessibilityInfo.setAccessibilityFocus(elementId);
        }
    };

    return (
        <TouchableOpacity
          onPress={() => {}}
          ref={setInitFocus}
        >
            <Text>Blah blah</Text>
        </TouchableOpacity>
    );
};

这是应用了这些更改后的点心:

https://snack.expo.io/@loganlim/example-accessibilityinfo-setaccessibilityfocus-not-working