在 react-native-web 中访问底层 DOM 节点

Question

在 react-native-web 中创建自定义组件时，我想访问我的 View 组件的底层 DOM 节点以添加/删除 eventListener。

class MyButton extends React.Component {    
  render() {
    return (
      <View ref={component => this._root = component}>
        <Text>{this.props.label}</Text>
      </View>
    )
  }
}

我想像这样添加一个事件监听器：

this._root.dontknowthis.addEventListener('sn:focused', this._componentFocused);

作为替代解决方案，我尝试直接渲染一个组件，然后附加 eventListener：

    <div
      ref={e => (this.el = e)}
      tabIndex="-1"
    >
      <WrappedComponent {...this.props} />
    </div>

在这种情况下，我可以附加一个 eventListener：

this.el.addEventListener('sn:focused', this._componentFocused);

这有效，但我也想在这个组件上设置一个样式，最好是通过 props 传递的样式。这似乎不起作用，因为 react-native 样式与 DOM 节点样式不同。

那么这里最好的解决方案是什么？继续使用 div 组件并以某种方式重新格式化样式，还是使用 View 并以某种方式访问​​底层 DOM 节点以附加侦听器？