setAccessibilityFocus 使用 ref 不起作用 [英] setAccessibilityFocus using ref not working

问题描述

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

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.

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

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.

查看我的零食: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>
    );
  }
}

推荐答案

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

I don't really understand what is causing these issues. I've found that calling the setAccessibilityFocus twice solves the problem. You can simplify the logic of focusing by just handling everything in the callback ref as well.

示例:

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

这是应用了这些更改的零食:

Here's your snack with those changes applied:

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

这篇关于setAccessibilityFocus 使用 ref 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！