Как я могу получить данные от родителя в реагировать родной с помощью 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

Вы можете получить доступ к тому же navigation реквизиту, как и this.props.navigation. react-navigation гарантирует, что пропущен пропущенный при регистрации экрана.

РЕДАКТИРОВАТЬ

Вот фрагмент того, как это будет выглядеть:

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')} ... />
}