setAccessibilityFocus using ref not working

问题

I'm using the ref prop along with findNodeHandle on a bunch of components in order to be able to trigger AccessibilityInfo.setAccessibilityFocus. However, it's not always working as expected. Sometimes the reference is null even though componentDidMount has executed.

I'm often using setAccessibilityFocus in order to focus the header of a new element which appears on the screen, for example when opening a modal.

IMPORTANT: This is Voiceover/Talkback functionality so you'll need to have that activated on your device.

See my snack: https://snack.expo.io/@insats/example-accessibilityinfo-setaccessibilityfocus-not-working

This is the code sample:

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>
    );
  }
}

来源：https://stackoverflow.com/questions/63252638/setaccessibilityfocus-using-ref-not-working

标签

react-native

accessibility

voiceover

talkback