質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Q&A

0回答

304閲覧

react-native 、navigation使用時 でのエラー []

DEVELOPER-SYU

総合スコア15

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

0グッド

0クリップ

投稿2018/08/21 01:43

react-native-navigationを利用してページの移動を実装したいと思っています。

イメージ説明
snack.expo上で実装の使用を試している時に
こちらのエラーが発生しました

発生している問題・エラーメッセージ

r.props.navigation.goBack is not defined.

該当のソースコード

import React, { Component } from 'react'; import {AppRegistry, FlatList, StyleSheet, Button, View, Text, TouchableHighlight } from 'react-native'; import { createStackNavigator } from 'react-navigation'; class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <FlatList data={[ {key: 'Devin'}, {key: 'Jackson'}, {key: 'James'}, {key: 'Joel'}, {key: 'John'}, {key: 'Jillian'}, {key: 'Jimmy'}, {key: 'Julie'}, ]} renderItem={({item}) => <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}> <View style={styles.temp}> <View style={{backgroundColor : 'yellow',width:100,height:100}}> <Text style={styles.item}>{item.key}</Text> </View> <View style={ {backgroundColor: 'skyblue',width:250,padding:5}}> <Text style={styles.item}>{item.key}</Text> </View> </View> </TouchableHighlight>} /> </View> )} } class DetailsScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Details Screen</Text> <Button title="Go to Details... again" onPress={() => this.props.navigation.goBack()} /> </View> ); } } const RootStack = createStackNavigator( { Home: HomeScreen, Details: DetailsScreen, }, { initialRouteName: 'Home', } ); export default class App extends React.Component { render() { return <RootStack />; } } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 22, }, temp: { flex:2, margine:20, padding: 10, flexDirection: 'row' }, item: { padding: 10, fontSize: 18, height: 44, }, });

試したこと

グーグル上でエラーメッセージを調べたり
react-navigationの公式ホームページで
headerの実装方法を調べましたが
バグフィックスができません。。。
直し方をご存知の方、いらっしゃいましたら
お伺いしたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

howareyou1245

2020/05/03 19:37

navigation.navigateは機能してますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問