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