javascript - react native : How to make a component do an action on press

Question

我有一个很大的组件/ View ，占据了大部分屏幕。我希望它能显示一些有关新闻的附加信息。有没有办法让主组件捕获按下事件，或者是否需要由填充主组件的子组件捕获(尽量避免使用额外的子组件来保持一切更干净)？

我想要这样的东西，如果 onPress 可以在内部设置就更好了:

主视图:

<MainComponent onPress={ /* Call the components onPress */ } />

主要组件:

export default class MainComponent extends Component {
  ...

  onPress() {
    // display additional data
  }
}

谢谢。

Answer 1

在 React-Native 上，处理触摸是通过 Touchables 组件完成的。 (official doc)

您可以根据您的用途使用任何这些 native 组件。例如，如果您只想捕获主组件上的按下事件，则可以将其包装在 TouchableWithoutFeedback ( doc ) 下，并使用 onPress 属性。

export default class MainComponent extends Component {
  ...

  onPress() {
    // display additional data
  }

  ...

  render() {
    return (
        <TouchableWithoutFeedback onPress={() => this.onPress()}>
            <View>
               ...
            </View>
        </TouchableWithoutFeedback>
    )
  }
}