Question

我正在使用堆栈导航器在我的反应原生应用程序中的屏幕之间导航。但它使用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}
});

我的目标是抓住更多它应该只打开特定的博客提供任何帮助将不胜感激。提前谢谢！

Answer 1

在onPress回调中

，this可能会被更改，因此this.props.navigation的值可能与您的预期不同。您应该使用变量来保存navigation并避免在回调中使用this。请参阅下面的代码。

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

Answer 2

我相信@Harlan要求的是：

    import AppNavigator from './Navigation.js'

    class App extends Component {
       render(){
         return(
           <View>
            <AppNavigator/>
           </View>
         )
       }
    }

    AppRegistry.registerComponent( 'app', () => App );

他可能有一点，因为你没有在Navigation.js中导出导航器。如果没有上述代码，那么您的组件将不会在其道具中导航。

堆栈导航器反应原生

2 个答案: