堆栈导航器反应原生

我正在使用堆栈导航器在我的反应原生应用程序中的屏幕之间导航 . 但它使用this.props.navigation.navigate给我一个错误 . 请告诉我这里我做错了什么 .

我在我的应用程序中也使用react-native router-flux但是出于某种目的我需要使用堆栈导航器，因为我的应用程序有主页，它显示了博客订阅的一些内容和点击阅读更多它应该打开只有那个特定的详细视图博客提供详细页面，因此，为此我在这里使用堆栈导航器 . 这是我的代码：

Home.js：

import React, { Component } from 'react';
import {
  ActivityIndicator,
  ListView,
  Text,
  StyleSheet,
  View,
  Button,
  TouchableOpacity
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {Actions, Router, Scene} from 'react-native-router-flux';
import TimeAgo from 'react-native-timeago';

import {
  Card,
  CardItem,
  Content,
  Header,
  Body,
  Footer,
  FooterTab,
  Container,
  Left,
  Icon,
  Right
} from 'native-base';

import {GetImage,ContentSnippet} from './helpers/helpers';
import HTMLView from 'react-native-htmlview';
import FitImage from 'react-native-fit-image';

export default class Home extends Component {


  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      count:0,
      count1:0
    }
  }


  componentDidMount() {
    return fetch('http://www.cardory.co.uk/jan/json')
      .then((response) => response.json())
      .then((responseJson) => {
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !==     r2});
        this.setState({
          isLoading: false,
          dataSource: ds.cloneWithRows(responseJson.items),
        }, function() {
          // do something with new state
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }


  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 80}}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <Container style={{flex: 1, paddingTop: 60}} >
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) =>

      <Card>
        <CardItem header>
          <Text style={styles.titleHeading}>{rowData.title}</Text>
        </CardItem>
        <CardItem cardBody>
            <Content style={{marginLeft:10,marginRight:10}}>
              <FitImage source={{uri: GetImage(rowData.content_html)}}/>
              <HTMLView value={ContentSnippet(rowData.content_html.replace(/<img[^>]*>/g,""))}/>
            </Content>
        </CardItem>
        <CardItem>
            <Left>

              <TouchableOpacity onPress={() =>this.props.navigation.navigate('Detail')}>
                <Text style={styles.ReadMore}>
                  Read more
                </Text>
              </TouchableOpacity>
            </Left>

            <Right>
              <Text style={styles.Time}>
                <Icon name="time" style={{color:'#483D8B'}}/>
                <TimeAgo time=  {rowData.date_published}/>
              </Text>
            </Right>
        </CardItem>

      </Card>
    }
  />
  </Container>
);
  }

}



const styles=StyleSheet.create({
  textHeading:{
    fontSize:20,
    marginTop:20
  },
  titleHeading:{
    fontSize:20,
    fontWeight:'bold',
    color:'black',
    alignItems:'center',
  },
  ReadMore:{
    color:'#483D8B',
    fontSize:15,
    fontWeight:'bold'
  },
  Time:{
    color:'#483D8B',
    alignSelf:'stretch'
  },
});

Navigation.js：

import React,{Component} from 'react';

import {
  View,
  Text,
  TouchableOpacity
} from 'react-native';

import {StackNavigator} from 'react-navigation';
import Home from './Home';
import Info from './Info';
import Details from './Details';
import Register from './Register';

const Navigation = StackNavigator({
    Home:{screen: Home},
    Info:{ screen: Info},
    Details:{ screen: Details},
    Register:{ screen: Register}
});

我的目标是克服阅读更多它应该只打开特定的博客饲料任何帮助将不胜感激 . 提前致谢！