React Native:如何使组件在按下时执行操作
问题描述:
我有一个大型组件/视图,可以填满大部分屏幕。我希望它能在新闻中显示一些额外的信息。是否有办法让主要组件抓住新闻事件,或者是否需要被内部填充主要组件的子组件捕获(试图避免使用额外的子组件来保持一切更清洁)?React Native:如何使组件在按下时执行操作
我想有这样的事情,甚至更好,如果onPress可在内部设置:
主视图:
<MainComponent onPress={ /* Call the components onPress */ } />
主要成分:
export default class MainComponent extends Component {
...
onPress() {
// display additional data
}
}
谢谢。
答
上反应本地的,触摸操作与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>
)
}
}
答
使用状态对象。 在阵营文档: https://facebook.github.io/react-native/docs/state.html
+1
'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
因此,如果我理解正确,主要组件内的TouchableWithoutFeedback组件? – gokujou
@ gokujou!它只是将你现有的渲染包装在你的主要组件中。 –