[英]Property 'XYZ' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'
[英]Property 'navigation' does not exists on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>
我對本地反應完全陌生。
我有以下組件:
播放列表:
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>
)}
/>
);
}
}
播放列表的詳細信息:
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;
我收到錯誤Property 'navigation' does not exist on type ...
。
我嘗試添加以下代碼:
interface Props {
navigation: any
}
然后添加這個:
export default class PlaylistDetails extends Component<Props> {
...
}
這消除了錯誤,但是當我運行應用程序時,我收到以下錯誤: TypeError: undefined is not an object (evaluating 'navigation.navigate')
。
我對原生反應完全陌生,不知道如何解決。 我希望有人可以幫助我。
一切都很好,您正在定義正確的接口。
但是,您應該傳播道具,而不是深入 1 級並在道具對象內傳播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>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.