前提・実現したいこ
App.jsに定義している各PageにStartButtonを用いて画面遷移を行えるようにしたい
reactnavigationを使って画面遷移しようとするとiosSimulatorで TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')のエラーコードが出る。
エラーメッセージ
TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')
App.js
import { StackNavigator } from 'react-navigation'; import swipePage from './src/screens/swipePage'; import tinder from './src/screens/tinder'; import tinderResult from './src/screens/tinderResult'; const App = StackNavigator({ Page1: { screen: swipePage }, Page2: { screen: tinder }, page3: { screen: tinderResult }, }); export default App;
StartButton.js
import React from 'react'; import { StyleSheet, View, Text, TouchableHighlight } from 'react-native'; class StartButton extends React.Component { render() { const { onPress } = this.props; return ( <View> <TouchableHighlight onPress={onPress}> <View style={styles.startButtonstyle}> <Text style={styles.startButtontext}>Tap to start</Text> </View> </TouchableHighlight> </View> ); } } export default StartButton;
swipePage.js
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import Swiper from 'react-native-swiper'; import StartButton from '../elements/StartButton'; export default class App extends React.Component { render() { const { navigate } = this.props.navigation; return ( <Swiper showsButtons loop={false}> <View style={styles.slide}> <Text style={styles.text}>First Page</Text> </View> <View style={styles.slide}> <Text style={styles.text}>Second Page</Text> </View> <View style={styles.slide}> <Text style={styles.text}>Third Page</Text> </View> <View style={styles.slide}> <StartButton onPress={() => { navigate('Page2'); }} /> </View> </Swiper> ); } }
tinder.js
import React from 'react'; import { StyleSheet, Text, View, Image } from 'react-native'; import SwipeCards from 'react-native-swipe-cards'; import StartButton from '../elements/StartButton'; class Card extends React.Component { constructor(props) { super(props); } render() { return ( <View style={styles.card}> <Image style={styles.thumbnail} source={{uri: this.props.image}} /> </View> ) } } class NoMoreCards extends React.Component { constructor(props) { super(props); } render() { const { navigate } = this.props.navigation; return ( <View> <View style={styles.noMoreCards}> <Text>No more cards</Text> </View> <View> <StartButton onPress={() => { navigate('Page3'); }} /> </View> </View> ) } } const cards = [ {name: '1', image: 'https://media.giphy.com/media/GfXFVHUzjlbOg/giphy.gif'}, {name: '2', image: 'https://media.giphy.com/media/irTuv1L1T34TC/giphy.gif'}, {name: '3', image: 'https://media.giphy.com/media/LkLL0HJerdXMI/giphy.gif'}, {name: '4', image: 'https://media.giphy.com/media/fFBmUMzFL5zRS/giphy.gif'}, ] const cards2 = [ {name: '10', image: 'https://media.giphy.com/media/12b3E4U9aSndxC/giphy.gif'}, {name: '11', image: 'https://media4.giphy.com/media/6csVEPEmHWhWg/200.gif'}, ] export default class App extends React.Component { constructor(props) { super(props); this.state = { cards: cards, outOfCards: false } } handleYup (card) { console.log("yup") } handleNope (card) { console.log("nope") } cardRemoved (index) { console.log(`The index is ${index}`); let CARD_REFRESH_LIMIT = 3 if (this.state.cards.length - index <= CARD_REFRESH_LIMIT + 1) { console.log(`There are only ${this.state.cards.length - index - 1} cards left.`); if (!this.state.outOfCards) { console.log(`Adding ${cards2.length} more cards`) this.setState({ cards: this.state.cards.concat(cards2), outOfCards: true }) } } } render() { return ( <SwipeCards cards={this.state.cards} loop={false} renderCard={cardData => <Card {...cardData} />} renderNoMoreCards={() => <NoMoreCards />} showYup={true} showNope={true} handleYup={this.handleYup} handleNope={this.handleNope} cardRemoved={this.cardRemoved.bind(this)} /> ) } }
試したこと
各PageにStartButtonを呼び出してそこから画面遷移させている。
Page1からPage2は問題なく画面遷移が行えるが、Page2からPage3に画面遷移させようとするとエラーコードが返されてしまう
補足情報(FW/ツールのバージョンなど)
Page2で使用しているライブラリ
https://github.com/meteor-factory/react-native-tinder-swipe-cards
初学者なものでなかなか解決できず、どうか御願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/06/25 08:30
2018/06/25 09:13