轉到使用React-Native的文章列表的詳細視圖

Question

我正在嘗試創建文章列表。目前，我有第一個視圖顯示列表視圖中的所有文章。當我們點擊一​​篇文章時，我們必須重新指向顯示本文細節的其他視圖。但我不知道如何獲得文章的細節。

'use strict'; 

import React, { Component } from 'react'; 
import { AppRegistry, StyleSheet, Text, View, ListView, TouchableHighlight, 
ActivityIndicator, Image } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
import Article from './article'; 

export default class Home extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
    isLoading: true 
    } 
} 

static navigationOptions = { 
    title: 'Articles' 
} 

componentDidMount() { 
    return fetch('http://www.femininbio.com/json/liste-articles') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.setState({ 
     isLoading: false, 
     dataSource: ds.cloneWithRows(responseJson), 
    }); 
    }) 
    .catch((error) => { 
    console.error(error); 
    }); 
} 

renderRow(rowData) { 
    return (
    <TouchableHighlight id={rowData.id} onPress={() => this.props.navigation.navigate('Article')} underlayColor='#F5FCFF' style={styles.item}> 
    <View style={styles.itemView}> 
     <Image style={styles.image} source={{uri: rowData.i.u}}/> 
     <View style={styles.blockText}> 
     <Text style={styles.titleArticle}>{rowData.t}</Text> 
     <Text style={styles.rubrique}>Rubrique : {rowData.r.n}</Text> 
     </View> 
    </View> 
    </TouchableHighlight> 
); 
} 

    render() { 
    if (this.state.isLoading) { 
     return (
     <View style={styles.loading}> 
      <ActivityIndicator/> 
     </View> 
    ); 
    } 

    return (
     <View style={styles.container}> 
     <ListView 
      style={styles.list} 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow.bind(this)} 
     /> 
     </View> 
    ); 
    } 
} 

所以我共進午餐stacknavigator的另一種觀點，我認爲我必須使用道具來獲得物品的ID和過濾數據，但對我來說有點模糊。

Answer 1

在導航到新屏幕時，您可以將參數傳遞到新屏幕。使用您在新屏幕中獲得的參數，您可以進行新的抓取，或者僅使用您傳遞的信息在屏幕上顯示數據。您可以在react-navigation docs

例閱讀更多關於這個話題

<TouchableHighlight 
    id={rowData.id} 
    onPress={() => this.props.navigation.navigate('Article', { article: rowData})}> 
    // ... 
</TouchableHighlight> 

// And in your Article Screen 
console.log(this.props.navigation.state.params.article) // will print article object/data