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

jhiyze9q  于 2023-06-06  发布在  React
关注(0)|答案(1)|浏览(96)

我正在创建文章列表。目前,我有第一个视图,显示所有的文章列表视图。当我们点击一篇文章时,我们必须重定向到显示这篇文章详细信息的其他视图。但是我不知道如何获得文章的详细信息。

'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换了一个视图,我想我必须用props来获取文章的id和过滤数据,但对我来说有点模糊。

yyhrrdl8

yyhrrdl81#

在导航到新屏幕时,您可以将参数传递到新屏幕。通过在新屏幕中获取的参数,您可以进行新的获取,或者仅使用传递的信息在屏幕上显示数据。你可以在react-navigation文档中阅读更多关于这个主题的内容

示例

<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

相关问题