Тип typeof GalleryScreen нельзя назначить типу ComponentType <SceneProps
У меня есть React Native
- Typescript
проект, в котором я использую: React Native Paper
,
Я использую следующие пакеты:
...
"react": "16.3.1",
"react-native": "^0.58.6",
"react-native-paper": "^2.12.0",
...
У меня есть следующее Typescript
файл:
VehicleListScreen.tsx
import * as React from 'react';
import { ScrollView, View, Image, Dimensions, StyleSheet } from 'react-native';
import { BottomNavigation } from 'react-native-paper';
import GalleryScreen from './GalleryScreen';
type State = {
index: number,
routes: Array<{
key: string,
title: string,
icon: string,
color: string,
topic: string,
}>
};
export default class VehicleListScreen extends React.Component<{}, State> {
static title = 'Vehicle List';
state = {
index: 0,
routes: [
{
key: 'album',
title: 'Album',
icon: 'photo-album',
color: '#6200ee',
topic: 'cars',
},
{
key: 'library',
title: 'Library',
icon: 'inbox',
color: '#2962ff',
topic: 'buses',
},
{
key: 'favorites',
title: 'Favorites',
icon: 'favorite',
color: '#00796b',
topic: 'trams',
},
{
key: 'purchased',
title: 'Purchased',
icon: 'shop',
color: '#c51162',
topic: 'planes',
},
]
};
render() {
return (
<BottomNavigation
navigationState={this.state}
onIndexChange={(index: number) => this.setState({ index })}
renderScene={BottomNavigation.SceneMap({
album: GalleryScreen,
library: GalleryScreen,
favorites: GalleryScreen,
purchased: GalleryScreen,
})}
/>
);
}
}
Моя проблема в том, что внутри я получаю следующую ошибку: BottomNavigation / renderScene
значение атрибута:
Type 'typeof GalleryScreen' is not assignable to type 'ComponentType<SceneProps<{ key: string; title: string; icon: string; color: string; topic: string; }>>'.
как вы можете видеть на следующем изображении:
На всякий случай, здесь у вас есть содержание Typescript
файл:
GalleryScreen.tsx
import * as React from 'react';
import { ScrollView, View, Image, Dimensions, StyleSheet } from 'react-native';
type Props = {
route: {
key: string,
title: string,
icon: string,
color: string,
topic: string,
}
};
export default class GalleryScreen extends React.Component<Props> {
render() {
const PHOTOS = Array.from({ length: 24 }).map(
(_, i) => `https://loremflickr.com/300/300/${this.props.route.topic}/?id=${i}`
);
return (
<ScrollView contentContainerStyle={styles.content}>
{PHOTOS.map(uri => (
<View key={uri} style={styles.item}>
<Image source={{ uri }} style={styles.photo} />
</View>
))}
</ScrollView>
);
};
}
const styles = StyleSheet.create({
content: {
flexDirection: 'row',
flexWrap: 'wrap',
padding: 10,
},
item: {
height: Dimensions.get('window').width / 2,
width: '50%',
padding: 4,
},
photo: {
flex: 1,
resizeMode: 'cover',
},
})
Есть ли у вас какие-либо идеи о том, как правильно избавиться от этой ошибки? Может быть, указать правильные типы?
Спасибо!