reactjs - 不能在 react-native 项目中使用 react-navigation 和 typescript 进行导航

问题描述

我正在尝试在我的 react-native 项目中使用打字稿。这是我第一次使用打字稿，所以我了解了基础知识，但是对react-navigation等第三方库有一些问题。我的项目中有父（Screen_1）和嵌套（DataList）组件。嵌套组件从 rest api 获取数据并显示项目列表。在 WebStorm TSLint 中以红色下划线显示错误：

“{}”类型中缺少属性“导航”，但在“只读”类型中是必需的

此外，无法从“Screen_1”导航到“详细信息”页面。导航方案：MainScreen-->Screen_1-->ScreenDetail

如果有人帮助我解决我的问题，我将不胜感激。

first_screen.tsx：

import React from 'react';
import {Component} from 'react';
import { AppUrls } from "../../config/urls";
import fetchList from '../../config/functions/fetchListData'
import { withNavigation, NavigationScreenProp} from 'react-navigation';
import { Text, View, Image, ImageBackground, TouchableHighlight, FlatList, Linking} from 'react-native';


interface Props {
    navigation: NavigationScreenProp<any,any>
}


interface DataJson {
    description: string,
    photo_url: string,
    price: string,
    slug: string,
    title: string
}

interface State {
    common_list: DataJson[]
}


export default class Screen_1 extends Component<Props> {
    render() {
        return (
            <View>
                <ImageBackground source={require("../../assets/screen/back.jpg")}>
                    <View>
                        <ImageBackground source={require("../../assets/screen/header.jpg")}>
                            <View>
                                <View><TouchableHighlight onPress={() => this.props.navigation.goBack()}><Image source={require("../../assets/common_screen/arow-icon.png")}/></TouchableHighlight></View>
                                <View><TouchableHighlight  onPress={ ()=> Linking.openURL(AppUrls.site_link) } ><Image source={require("../../assets/screen/logo.png")}/></TouchableHighlight></View>
                                <View><Text>TEXT TEXT TEXT</Text></View>
                            </View>
                        </ImageBackground>
                    </View>
                    <View>
                        <DataList/>
                    </View>
                    <View>
                    </View>
                 </ImageBackground>
             </View>
        )
    }
}

class DataList extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            data_list:[]
        }
    }
    async componentDidMount() {
        const data = await fetchList.fetchListData(AppUrls.api_url);
        this.setState({data_list:data});
    }

    render() {
        return (
            <View>
                <FlatList
                    data={this.state.common_data}
                    showsVerticalScrollIndicator={false}
                    renderItem={({item}) =>
                         <View>
                            <View>
                                <TouchableHighlight  onPress={() => this.props.navigation.navigate("Detail")}><Image source={{uri:"https://www.example.com/"+item.photo_url}}/></TouchableHighlight>
                            </View>
                            <View>
                                <View>
                                    <TouchableHighlight ><Text>{item.title} 
   </Text></TouchableHighlight>
                                </View>
                                <View>
                                     <Image source={require("../../assets/screen/icon.png")}/>
                                     <Text>{item.price}</Text>
                                </View>
                             </View>
                         </View>
                     }
                     keyExtractor={item => item.slug}
                  />
             </View>
         )
      }
 }

路由器.ts：

 import { createStackNavigator, createAppContainer } from 'react-navigation';
 import MainScreen from '../screens/main_screen'
 import Screen_1 from '../screens/first/first_screen'
 import Screen_2 from '../screens/second/second_screen'
 import Screen_3 from '../screens/third/third_screen'
 import ScreenDetail from '../screens/detail'

 const FirstScreenStack = createStackNavigator({
         Screen: {
             screen: Screen_1,
         },
         Detail: {
             screen: ScreenDetail,
        }
     },
    {
         initialRouteName: "Screen",
         mode: 'modal',
         headerMode: 'none',
     },

 );

const MainStack = createStackNavigator({
        Main: {
            screen: MainScreen,
        },
        FirstScreen: {
            screen: FirstScreenStack
        },
        SecondScreen: {
            screen: Screen_2,
        },
        ThirdScreen: {
            screen: Screen_3,
        },
    },
    {
        initialRouteName: "Main",
        mode: 'modal',
        headerMode: 'none',
    },
);

标签： reactjstypescriptreact-native

reactjs - 不能在 react-native 项目中使用 react-navigation 和 typescript 进行导航

问题描述

解决方案

推荐阅读