reactjs - TouchableOpacity 上的 React Native nextFocusRight Prop 不起作用

Question

我试图使用 nextFocusRight 停止从 React Native 中的最后一个元素传播焦点，但焦点仍然传播到下一个 View 。据此pull请求，它应该可以工作，但我仍然面临同样的问题

我的代码:应用程序.js

export default class App extends Component {

  render() {
    const data = [];
    for (let i = 0; i < 10; i++)
      data.push(i);

    return (
      <View>
        <View>
          {[1, 2].map(() => (
            <ScrollView horizontal style={{ height: 210 }}>
              {data.map(i => <Item id={i} buttonRef={this.buttonRef} />)}
            </ScrollView>
          ))}

        </View>
      </View>
    );
  }
}

Item.js

export default class Item extends Component {
    myRef = null;

    componentDidMount() {
        const { id } = this.props;
        if (id == 0) {
            this.myRef.setNativeProps({ nextFocusLeft: findNodeHandle(this.myRef) })
        } else if (id == 9) {
            this.myRef.setNativeProps({ nextFocusRight: findNodeHandle(this.myRef) })
        }
    }

    render() {
        const { id } = this.props;
        return (
            <TouchableOpacity
                key={id}
                ref={(c) => this.myRef = c}
            >
                <View
                    style={{
                        backgroundColor: 'grey',
                        width: 100,
                        height: 100,
                    }}
                >
                    <Text style={{ fontSize: 60 }}>{id}</Text>
                </View>
            </TouchableOpacity>
        )
    }

}

这里出了什么问题？有人知道吗？

Answer 1

昨天 React-Native 发布了 0.60.0 修复了这个错误。 changelog中没有提到它但他们已经在 0.60.0 中修复了它。

对于使用 0.59.9 或更低版本的用户，请将您的项目升级到 0.60.0。