Тип 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',
    },
})

Есть ли у вас какие-либо идеи о том, как правильно избавиться от этой ошибки? Может быть, указать правильные типы?

Спасибо!

0 ответов

Другие вопросы по тегам