Question

我有一个大型组件/视图，可以填充大部分屏幕。我希望它能在出版时显示一些额外的信息。有没有办法让主要组件捕获新闻事件，或者是否需要被填充主要组件的子组件捕获（试图避免使用额外的子组件来保持一切更干净）？

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

主要观点：

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

主要组成部分：

export default class MainComponent extends Component {
  ...

  onPress() {
    // display additional data
  }
}

谢谢。

Answer 1

在React-Native上，使用Touchables组件处理触摸。（official doc）

您可以根据使用情况使用任何这些本机组件。例如，如果您只想捕获主要组件上的新闻事件，可以将其包裹在TouchableWithoutFeedback（doc）下，并使用onPress道具。

export default class MainComponent extends Component {
  ...

  onPress() {
    // display additional data
  }

  ...

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

Answer 2

您可以将组件包装在能够处理触摸的其中一个组件中。

export default class MyComponent extends Component {

  render() {    
    return (
      <TouchableWithoutFeedback onPress={this.props.onPress}>
        <View>
          <Text>My Component</Text>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

然后在主视图中：

<MyComponent onPress={ () => console.log("Pressed!") } />

您可以阅读官方RN文档中有关处理触摸的更多信息：https://facebook.github.io/react-native/docs/handling-touches.html

React Native：如何使组件在按下时执行操作

2 个答案: