如何使用 Flatlist 從反應本機的父級檢索數據？

Question

我在 ResultsShowScreen.js 中有一個平面列表，當用戶點擊平面列表中的項目時，我試圖將一些數據傳遞給子屏幕。

    ResultsShowScreen.js
                        <TouchableOpacity 
                            onPress = {() => navigation.navigate('Audioplayer',  {id: item.id, name:item.name, audio_file: item.audio_file}) } >
                            <Text> {item.name}  ({item.length} min) </Text>
                            <Text> {item.short_desc} </Text>
                            <Text> {item.long_desc} </Text>
                            <Text> Avg Rating: {item.avg_rating}/5  ({item.num_ratings} ratiings) </Text>

                        </TouchableOpacity>

在 AudioplayerScreen.js 中，我目前有以下內容並且可以使用。

    const AudioplayerScreen = ( {navigation} ) => {

        // Get values from previous page
        const name = navigation.getParam('name');
        const id = navigation.getParam('id');
        const audio_file = navigation.getParam('audio_file');

但我試圖按照這里的教程（ https://amanhimself.dev/build-an-audio-player-in-react-native ）使用以下格式的組件

    export default class AudioplayerScreen extends React.Component {
        // rest of code here

在 AudioplayerScreen.js 中，如何使用上述方法檢索從父級傳遞的數據？

Answer 1

您可以像this.props.navigation一樣訪問相同的navigation道具。 react-navigation確保在您注冊屏幕時傳遞 prop。

編輯

下面是它看起來像的片段：

export default class AudioplayerScreen extends React.Component {
  constructor(props){
    super(props);
    this.name = props.navigation.getParam('name');
  }
  ...
  // or outside constructor
  return <Button title={this.props.navigation.getParam('name')} ... />
}