javascript - 属性 'navigation' 在类型“Readonly<{}>”和“Readonly<{children?”上不存在？ : ReactNode; }>

Question

我对原生 react 完全陌生。

我有以下组件:

播放列表:

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>
        )}
      />
    );
  }
}

播放列表的详细信息 View :

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>
    );
  }
}

导航:

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

const stack = createStackNavigator(screens);

export default createAppContainer(stack);

但是在 const { navigation } = this.props.navigation; 处，我收到错误类型上不存在属性“navigation”...。

我尝试添加以下代码:

interface Props {
    navigation: any
}

然后添加:

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

这消除了错误，但是当我运行应用程序时，出现以下错误:TypeError: undefined is not an object (evaluating 'navigation.navigate')。

我对原生 react 完全陌生，不知道如何解决这个问题。我希望有人能帮助我。

Answer 1

一切都很好，并且您正在定义正确的接口(interface)。

但是，您应该传播 props，而不是深入 1 层并在 props 对象中传播 navigation 属性。

它应该是这样的:

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>
    );
  }
}