'Readonly<{}> & Readonly<{ children?: ReactNode; 类型上不存在属性“导航” }>

Question

I am completely new to react native.

I have the following components:

Playlists:

export default class Playlists extends Component {
  playlists = [
    ...
  ];

  render() {
    const {navigation} = this.props.navigation;

    return (
      <FlatList
        data={this.playlists}
        renderItem={({item}) => (
          <TouchableOpacity
            style={styles.item}
            onPress={() => navigation.navigate('PlaylistDetails', item)}>
            <Text style={styles.text}>{item.name}</Text>
          </TouchableOpacity>
        )}
      />
    );
  }
}

Details View of a Playlist:

export default class PlaylistDetails extends Component {
  render() {
    const {navigation} = this.props.navigation;
    var songs: Song[] = navigation.getParam('songs');

    return (
      <View>
        <Text>{navigation.getParam('name')}</Text>
        <FlatList
          data={songs}
          renderItem={({item: song}) => <Text>{song.title}</Text>}
        />
      </View>
    );
  }
}

And for navigation:

const screens = {
  Playlists: {
    screen: Playlists,
  },
  PlaylistDetails: {
    screen: PlaylistDetails,
  },
};

const stack = createStackNavigator(screens);

export default createAppContainer(stack);

But at const { navigation } = this.props.navigation; I get an error Property 'navigation' does not exist on type ... .

I have tried adding the following code:

interface Props {
    navigation: any
}

and then adding this:

export default class PlaylistDetails extends Component<Props> {
    ...
}

This removes the errors, but when I run the application, I get the following error: TypeError: undefined is not an object (evaluating 'navigation.navigate') .

I am totally new to react native and don't know how to solve that. I hope somebody can help me.

Answer 1

Everything is fine, and you are defining the right interface.

However, you should be spreading the props, rather than going 1 level deep and spreading the navigation property within the props object.

This is how it should be like:

export default class PlaylistDetails extends Component<Props> {
  render() {

    // edit this: 
    const { navigation } = this.props;
    var songs: Song[] = navigation.getParam('songs');

    return (
      <View>
        <Text>{navigation.getParam('name')}</Text>
        <FlatList
          data={songs}
          renderItem={({item: song}) => <Text>{song.title}</Text>}
        />
      </View>
    );
  }
}