Javascript 使用React Native转到文章列表的详细视图

我正在尝试创建文章列表。目前，我有第一个视图显示列表视图中的所有文章。当我们点击一篇文章时，我们必须重定向到另一个显示本文细节的视图。但我不知道如何获得文章的细节

'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>
    );
  }
}

“严格使用”；
从“React”导入React，{Component}；
导入{AppRegistry、样式表、文本、视图、ListView、TouchableHighlight、，
ActivityIndicator，Image}来自“react native”；
从“react navigation”导入{StackNavigator}；
从“/物品”导入物品；
导出默认类Home extends组件{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：正确
}
}
静态导航选项={
标题：“文章”
}
componentDidMount（）{
返回获取（'http://www.femininbio.com/json/liste-articles')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
让ds=newListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
这是我的国家({
孤岛加载：false，
数据源：ds.cloneWithRows（responseJson），
});
})
.catch（（错误）=>{
控制台错误（error）；
});
}
renderRow（行数据）{
返回(
this.props.navigation.navigate（'Article'）}underlayColor='#F5FCFF'style={styles.item}>
{rowData.t}
Rubrique:{rowData.r.n}
);
}
render（）{
if（此.state.isLoading）{
返回(
);
}
返回(
);
}
}

---

所以我和stacknavigator讨论了另一种观点，我认为我必须使用道具来获取文章的id和过滤数据，但这对我来说有点模糊

导航到新屏幕时，可以将参数传递到新屏幕。通过在新屏幕中获取的参数，您可以进行新的获取，或者仅使用您传递的信息在屏幕上显示数据。有关此主题的更多信息，请访问

示例

<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

this.props.navigation.navigate（'Article'，{Article:rowData}）}>
// ...
//在你的文章屏幕上
console.log（this.props.navigation.state.params.article）//将打印文章对象/数据

好的，谢谢你，我看到了文章屏幕，我必须通过包含更多文章信息的其他链接获得结果。因此，我需要再次使用fetch来只获得一个结果。有可能为一个结果创建一个fetch吗？@Guillaume这与您的API有很大关系