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：如何使組件在按下時執行操作

回答

相關問題