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

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

1 个答案: