我正在尝试使用带有我的react-native项目的打字稿。这是我第一次使用Typescript,所以我了解基本知识,但是第三方库有一些问题,例如react-navigation。我的项目中有parent(Screen_1)和nested(DataList)组件。嵌套的组件从rest api获取数据并显示项目列表。在WebStorm中,TSLint用红色强调并带有错误:
类型“ {}”中缺少属性“导航”,但类型为“只读”中必填
此外,无法从“屏幕_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>
)
}
}
router.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',
},
);
答案 0 :(得分:0)
与往常一样,解决方案非常简单。有必要将导航道具从父母转移到孩子:
<DataList navigation={this.props.navigation}/>
是什么。