Question

我目前在React Native中工作，我正在尝试使视力不好的人可以访问我的列表项组件，并且可能需要更大的文本，因此，我遇到了一些文本剪切或不剪切的问题完全显示。我想做的事情非常简单，如果用户启用辅助功能中的大文本，那么事件侦听器将在其上进行拾取，并使用该信息确定渲染时列表组件的高度。不幸的是，似乎我的应用无法检测到何时打开了辅助功能，因为在控制台中，我得到了很多false且默认高度为50（当没有大文本激活时）。我将附加一些屏幕截图，然后附加一些代码。

这是我的列表视图带有大文本的外观，您可以看到文本变大了，但是我的单个列表项的大小不能正确地适合大文本（应该为150，但仍为50）。 / p>

这就是我在控制台中看到的。

现在这是一些代码。请注意，为简洁起见，我省略了一些代码。

class NodeListItem extends PureComponent {

    constructor() {
        super();

        this.state = {
            largeTextEnabled: undefined,
        };
        this.itemPressed = this.itemPressed.bind(this);
    }

    componentDidMount() {
        AccessibilityInfo.addEventListener(
          'change',
          this._handleAccessibilityToggled
        );
        AccessibilityInfo.fetch().done((isEnabled) => {
            console.log(`Is enabled didMount: ${isEnabled}`);
            this.setState({
                largeTextEnabled: isEnabled,
            });
        });
    }

    componentWillUnmount() {
        AccessibilityInfo.removeEventListener(
          'change',
          this._handleAccessibilityToggled
        );
    }

    _handleAccessibilityToggled = (isEnabled) => {
        this.setState({
            largeTextEnabled: isEnabled,
        });
    };

    render() {
        const { displayName } = this.props.item;
        const adjustForAccessibility = this.state.largeTextEnabled ? 150 : 50
        console.log(`Here is height: ${adjustForAccessibility} and it is: ${this.state.largeTextEnabled}`);
        console.log(`Height ${this.state.largeTextEnabled ? 150 : 50}`);
        return (
            <TouchableOpacity style={{ flex: 1, height: this.state.largeTextEnabled ? 150 : 50 }} onPress={this.itemPressed}>
                <View style={styles.viewContainer}>
                    <Text style={CommonStyles.textDefaultBlackMedium} textAlign={'left'} allowFontScaling={true} numberOfLines={3} >{displayName}</Text>
                    {this.renderArrow()}
                </View>
            </TouchableOpacity>
        );
    }
}

我从这两个链接first和second中获得了启发。从本质上讲，我的应用程序监听可访问性的更改，然后用布尔值更新状态，然后在渲染组件时读取值并相应地调整高度。知道为什么打开辅助功能后列表项组件的大小不会从50更新为150吗？我只会在控制台中看到undefined或false。任何帮助都将受到欢迎。

Answer 1

编辑：注释中已解决，问题是更改的设置不是AccessibilityInfo API的一部分。

快速搜索后，我发现了这个问题，看起来像是您所寻求的解决方案：

https://github.com/facebook/react-native/issues/14725

无需深入了解本机代码，几乎可以肯定有人已经写过它了：P特别是最近对可访问性的关注。

Toggle函数与state一起使用时，应始终引用先前的状态并简单地将布尔值取反。

我不确定您的辅助功能按钮在哪里，但实际上您的切换功能应该看起来更像这样：

_handleAccessibilityToggled = () => {
        this.setState(prevState => {
            return {
                largeTextEnabled: !prevState.largeTextEnabled,
            }            
        });
    };

这样，每次单击都会将largeTextEnabled滑动到相反的状态，我还建议删除按钮单击的事件侦听器，并尽可能将状态保留在两个组件的父级中。

主要问题是onChange实际上并没有将isEnabled传递给切换函数，因此为什么它始终是未定义或错误的。

列表项不会因打开辅助功能时的大文本而更改高度

1 个答案: