我尝试在用户按下具有[HttpGet]
[ProducesResponseType(typeof(IList<Currency>), 200)]
public async Task<IActionResult> GetAll()
{
return Ok(await _typeService.GetCurrenciesAsync().ConfigureAwait(false));
}
[HttpGet("{id}", Name = "GetCurrency")]
[ProducesResponseType(typeof(Currency), 200)]
public async Task<IActionResult> Get([FromRoute]int id)
{
return Ok(await _expenseService.GetCurrencyAsync(id).ConfigureAwait(false));
}
的卡片时简单地更改屏幕，我使用<touchableNativeFeedback>创建路线并将我放入stacknavigator，
以下是我的index.android.js
index.android.js
我试图从import React from 'react';
import {
AppRegistry,
View
} from 'react-native';
import Header from './src/components/Header';
import NewsList from './src/components/NewsList';
import {
name as appName
} from './app.json';
import {
createStackNavigator,
createAppContainer
} from 'react-navigation';
import ReadNews from './src/components/ReadNews';
import NewsDetail from "./src/components/NewsDetail";
class App extends React.Component {
render() {
return ( <
View style = {
{
flex: 1
}
} >
<
Header title = {
'Today Headline'
}
/> <
NewsList / >
<
/View>
);
}
}
const Navigator = createStackNavigator({
Index: {
screen: App,
},
ReadDetail: {
screen: ReadNews,
},
NewsList: {
screen: NewsList
},
NewsDetail: {
screen: NewsDetail
}
});
const AppContainer = createAppContainer(Navigator);
export default AppContainer;
AppRegistry.registerComponent(appName, () => App);进行导航，因为那是我的卡片组件。并且此NewsDetail从“新闻列表”中调用。
以下是我的NewsDetail
NewsList.js
下面是我的import React, {
Component
} from 'react';
import {
View,
Text,
Image,
ScrollView
} from 'react-native';
import axios from 'axios';
import API from '../../api-endpoint';
import NewsDetail from './NewsDetail';
class NewsList extends Component {
constructor(props) {
super(props);
}
state = {
news: []
};
componentWillMount() {
axios.get(API.Headline)
.then(response => this.setState({
news: response.data.articles
}));
}
renderNews() {
return this.state.news.map(topic =>
<
NewsDetail key = {
topic.title
}
news = {
topic
}
navigation = {
this.props.navigation
}
/>
)
}
render() {
return ( <
ScrollView > {
this.renderNews()
} <
/ScrollView>
);
}
}
export default NewsList;
NewsDetail.js
我在import React from 'react';
import {
View,
Text,
Image,
TouchableNativeFeedback
} from 'react-native';
import {
RkCard,
RkTheme
} from "react-native-ui-kitten";
import {
DrawerNavigation
} from 'react-navigation';
export default class NewsDetail extends React.Component {
constructor(props) {
super(props);
this.articleView = this.articleView.bind(this);
}
render() {
const {
author,
title,
urlToImage,
source
} = this.props.news;
const {
textStyle,
sourceText
} = style;
return ( <
TouchableNativeFeedback onPress = {
this.articleView
} >
<
RkCard rkType = 'story'
key = {
title
} >
<
Image rkCardImg source = {
{
uri: urlToImage
}
}
/> <
View rkCardContent >
<
Text style = {
sourceText
} > {
source.name
} < /Text> <
Text style = {
textStyle
} > {
title
} < /Text> <
/View> <
View rkCardFooter >
<
Text > {
author
} < /Text> <
/View> <
/RkCard> <
/TouchableNativeFeedback>
);
}
articleView() {
this.props.navigation.navigate('ReadNews');
}
}
const style = {
textStyle: {
fontSize: 16,
color: '#000000',
textAlign: 'left',
fontWeight: 'bold',
},
sourceText: {
fontSize: 15,
fontWeight: 'bold',
}
};
RkTheme.setType('RkCard', 'story', {
margin: 10,
borderRadius: 10,
justifyContent: 'space-around',
img: {
height: 200,
opacity: 1,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
},
header: {
alignSelf: 'center'
},
content: {
alignSelf: 'center'
},
headerText: {
fontSize: 20,
}
});上放了onPress，但它返回了<TouchableNativeFeedback>，然后我尝试在Cannot read property of undefined中使用console.log（this.props），但找不到导航属性，只是我从articleView()发送的news属性。
现在我想念哪里了？ 我认为我错过了配置路线导航的步骤，但是我自己却无法解决。 有什么建议吗？
答案 0 :(得分：0)
我不明白为什么它不起作用。试试这个：
// NewsDetail.js
import {withNavigation} from 'react-navigation'
class NewsDetail extends Component {
// you class implementation
}
export default withNavigation(NewsDetail);