リアクションネイティブの記事リストの詳細ビューに移動

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