setAccessibilityFocus с использованием ref не работает - PullRequest
Новая
       95

setAccessibilityFocus с использованием ref не работает

0 голосов
/ 04 августа 2020

Я использую опору ref вместе с findNodeHandle для набора компонентов, чтобы иметь возможность запускать AccessibilityInfo.setAccessibilityFocus. Однако это не всегда работает должным образом. Иногда ссылка null, даже если componentDidMount выполнено.

Я часто использую 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>
    );
  }
}
...