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

我有一个大型组件/视图，可以填满大部分屏幕。我希望它能在新闻中显示一些额外的信息。是否有办法让主要组件抓住新闻事件，或者是否需要被内部填充主要组件的子组件捕获（试图避免使用额外的子组件来保持一切更清洁）？React Native：如何使组件在按下时执行操作

我想有这样的事情，甚至更好，如果onPress可在内部设置：

主视图：

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

主要成分：

export default class MainComponent extends Component { 
    ... 

    onPress() { 
    // display additional data 
    } 
}

谢谢。

来源

2017-08-26 gokujou

上反应本地的，触摸操作与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> 
    ) 
    } 
}

来源

2017-08-26 20:45:26

因此，如果我理解正确，主要组件内的TouchableWithoutFeedback组件？ – gokujou

@ gokujou！它只是将你现有的渲染包装在你的主要组件中。 –

-2

使用状态对象。在阵营文档： https://facebook.github.io/react-native/docs/state.html

来源

2017-08-26 20:37:49 FIL1994

'onClick'不存在反应母语。此外，它不回答问题 –

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

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

来源

2017-08-26 20:54:23 Wojtek

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

回答

相关问题