javascript - 列表项不会因打开辅助功能而改变高度以响应大文本

Question

我目前在 React Native 工作，我正在尝试让视力不佳的人也可以访问我的列表项组件，并且可能需要更大的文本，因此我遇到了一些与文本剪辑有关的问题完全显示。我想做的事情非常简单，如果用户在可访问性中打开大文本，那么我的事件监听器将接收它并使用该信息将在呈现时确定我的列表组件的高度。不幸的是，似乎我的应用程序永远无法检测到可访问性何时打开，因为在控制台中我得到了很多 false 和默认高度 50(当没有大文本处于事件状态时)。我将附上一些屏幕截图，然后附上一些代码。

这是我的 ListView 显示大文本的样子，您可以看到文本变大了，但我的各个列表项的大小没有正确调整以适应更大的文本(应该是 150，但仍然是 50)。

这是我在控制台中得到的..

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

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 .从本质上讲，我的想法是我的应用程序监听可访问性的变化，然后用 bool 值更新状态，然后在渲染我的组件时读取值并相应地调整高度。知道为什么我的列表项组件在打开辅助功能后没有将它们的大小从 50 更新到 150 吗？我只在控制台中看到 undefined 或 false。欢迎任何帮助。

Answer 1

编辑:已在评论中解决，问题是被更改的设置不是 AccessibilityInfo API 的一部分。

经过快速搜索后，我遇到了这个问题，它看起来像您所寻求的解决方案:

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

无需深入了解 native 代码，您几乎总是可以确定已经有人编写了它:P 尤其是最近对可访问性的关注。

---

一个 Toggle 函数，当与状态一起使用时，应该始终引用先前的状态并简单地反转 bool 值。

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

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

这样每次点击都会将 largeTextEnabled 轻弹到相反的状态，我还建议删除按钮点击的事件监听器，并在可能的情况下将状态保持在两个组件的父级中。

主要问题是 onChange 你实际上并没有将 isEnabled 传递给切换函数，因此它总是未定义或 false。