Невозможно прочитать свойство 'навигация' из неопределенного с React Navigation - PullRequest
Новая
       14

Невозможно прочитать свойство 'навигация' из неопределенного с React Navigation

0 голосов
/ 30 января 2019

Я пытаюсь просто изменить экран, когда пользователь нажимает карточку с <touchableNativeFeedback>, я использовал stacknavigator, чтобы создать свой маршрут, и я вставил в свой index.android.js, ниже мой index.android.js

import React from 'react';
import {
  AppRegistry,
  View
} from 'react-native';
import Header from './src/components/Header';
import NewsList from './src/components/NewsList';
import {
  name as appName
} from './app.json';
import {
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
import ReadNews from './src/components/ReadNews';
import NewsDetail from "./src/components/NewsDetail";

class App extends React.Component {
  render() {
    return ( <
      View style = {
        {
          flex: 1
        }
      } >
      <
      Header title = {
        'Today Headline'
      }
      /> <
      NewsList / >
      <
      /View>
    );
  }
}

const Navigator = createStackNavigator({
  Index: {
    screen: App,
  },
  ReadDetail: {
    screen: ReadNews,
  },
  NewsList: {
    screen: NewsList
  },
  NewsDetail: {
    screen: NewsDetail
  }
});

const AppContainer = createAppContainer(Navigator);

export default AppContainer;

AppRegistry.registerComponent(appName, () => App);

Я пытался перемещаться по нему с NewsDetail, потому что именно там у меня есть компонент моей карты.и этот NewsDetail вызывается из «Списка новостей».ниже мой NewsList.js, 

import React, {
  Component
} from 'react';
import {
  View,
  Text,
  Image,
  ScrollView
} from 'react-native';
import axios from 'axios';
import API from '../../api-endpoint';
import NewsDetail from './NewsDetail';

class NewsList extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    news: []
  };

  componentWillMount() {
    axios.get(API.Headline)
      .then(response => this.setState({
        news: response.data.articles
      }));
  }

  renderNews() {
    return this.state.news.map(topic =>
      <
      NewsDetail key = {
        topic.title
      }
      news = {
        topic
      }
      navigation = {
        this.props.navigation
      }
      />
    )
  }

  render() {
    return ( <
      ScrollView > {
        this.renderNews()
      } <
      /ScrollView>
    );
  }
}


export default NewsList;

и ниже мой NewsDetail.js

import React from 'react';
import {
  View,
  Text,
  Image,
  TouchableNativeFeedback
} from 'react-native';
import {
  RkCard,
  RkTheme
} from "react-native-ui-kitten";
import {
  DrawerNavigation
} from 'react-navigation';

export default class NewsDetail extends React.Component {
  constructor(props) {
    super(props);
    this.articleView = this.articleView.bind(this);
  }

  render() {
    const {
      author,
      title,
      urlToImage,
      source
    } = this.props.news;
    const {
      textStyle,
      sourceText
    } = style;
    return ( <
      TouchableNativeFeedback onPress = {
        this.articleView
      } >
      <
      RkCard rkType = 'story'
      key = {
        title
      } >
      <
      Image rkCardImg source = {
        {
          uri: urlToImage
        }
      }
      /> <
      View rkCardContent >
      <
      Text style = {
        sourceText
      } > {
        source.name
      } < /Text> <
      Text style = {
        textStyle
      } > {
        title
      } < /Text> <
      /View> <
      View rkCardFooter >
      <
      Text > {
        author
      } < /Text> <
      /View> <
      /RkCard> <
      /TouchableNativeFeedback>
    );
  }

  articleView() {
    this.props.navigation.navigate('ReadNews');
  }

}

const style = {
  textStyle: {
    fontSize: 16,
    color: '#000000',
    textAlign: 'left',
    fontWeight: 'bold',
  },
  sourceText: {
    fontSize: 15,
    fontWeight: 'bold',
  }
};


RkTheme.setType('RkCard', 'story', {
  margin: 10,
  borderRadius: 10,
  justifyContent: 'space-around',

  img: {
    height: 200,
    opacity: 1,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
  },
  header: {
    alignSelf: 'center'
  },
  content: {
    alignSelf: 'center'
  },
  headerText: {
    fontSize: 20,
  }
});

Я включил PressPress на моем <TouchableNativeFeedback>, но он возвращает Cannot read property of undefined, затем я попытался console.log (this.props) в articleView(), но я могу 'найти свойство навигации, просто свойство news, которое я отправил с NewsList.js.

Теперь, где я скучал?Я думаю, что я пропустил какой-то шаг, чтобы настроить навигацию по маршруту, но сам не могу понять это.есть предложения?

1 Ответ

0 голосов
/ 02 февраля 2019

Я не понимаю, почему это не сработает.Попробуйте это: 

// NewsDetail.js

import {withNavigation} from 'react-navigation'

class NewsDetail extends Component {
// you class implementation
}

export default withNavigation(NewsDetail);
...