javascript - React Native 中的堆栈导航器

Question

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

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

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

导航.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}
});

我的目标是点击“阅读更多”，它应该只打开特定的博客提要，任何帮助将不胜感激。提前致谢!

Answer 1

在onPress回调中，this可能会发生变化，因此this.props.navigation的值可能与您的期望不同。您应该使用变量来保存导航并避免在回调中使用this。请参阅下面的代码。

render() {
  const {navigation} = this.props;
  ...
  <TouchableOpacity onPress={() => navigation.navigate('Detail')}>
  ...
}