Блог

Я пытаюсь внедрить интернационализацию в проект react native, используя react-i18next. Ссылка. Я использую ссылку на HOC way, поскольку мой react native теперь несовместим с функцией hooks.

Помимо всего этого, в моем проекте используется Typescript, и это выдает странную ошибку, которую я могу понять, но не могу исправить. так сложно найти хорошие ресурсы для typescript, где вы получаете достаточное понимание для работы с реальными проектами. Вот мой код, который использует это:

 class HomePage extends React.Component<IHomePage, IHomePageState> {
    public constructor(props: IHomePage) {
        super(props)
        this.state = {
            didBlurSubscription: null,
        }
    }

    public componentDidMount() {
        console.log('componentDidMount triggered')
        const didBlurSubscription = this.props.navigation.addListener(
            'didBlur',
            (payload: any) => {
                console.debug('didBlur', payload)
            }
        )
        this.setState({
            didBlurSubscription,
        })
    }

    public componentWillUnmount() {
        const { didBlurSubscription } = this.state
        // didBlurSubscription.remove();
    }

    public renderItem({ item }: { item: any }) {
        console.log('item ==> ', item)
        return <ProductCard url={item.imageUrl} />
    }

    // unc: (num: number) => string = String;
    public keyExtractor = (item: Idata, index: number): string => index.toString()

    public render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    {/* <ProductCard url={"https://gdurl.com/XCB2"}/> */}
                    {/* <Slider
          renderItem={this.renderItem}
          data={data}
          keyExtractor={this.keyExtractor}
          horizontal
        /> */}
                    <SectionContainer />
                    <SectionContainer />
                    <SectionContainer />
                    {/* <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Details')}
          //onPress={() => this.props.navigation.push('Details')} // to add new route dynamically
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        /> */}
                </View>
            </ScrollView>
        )
    }
}
export default withTranslation()(HomePage)
  

Ошибка typecript, которую я получаю, заключается в следующем.

Примечание: Эта ошибка отображается в последней строке, где я пытаюсь добавить HOC для компонента. Вот определения для реквизитов и состояния

 interface IHomePage {
    navigation?: any
    [propName: string]: any
}

interface IHomePageState {
    didBlurSubscription: any
}