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

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

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

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

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

3回答

1229閲覧

react navigationで画面遷移ができない(react native)

yamady

総合スコア176

React Native

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

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/01/27 14:13

編集2018/01/29 06:45

React Nativeの画面遷移でReact Navigationを導入したいと考えています。
イメージとしては、ホームにいくつかサムネイルが並んでいて、これをクリックすると詳細画面に遷移するというのが実現したい内容です。

エラー

TypeError: Cannot read property 'navigate' of undefined

this.props.navigationが渡ってきていないようなのですが、その渡し方がいまいちわかっていません。

ソースコード

./components/LibrarItem.js(サムネイル)

JavaScript

1import React from 'react'; 2import { Text } from 'react-native'; 3import { Card } from './common'; 4import { connect } from 'react-redux'; 5import { StackNavigator } from 'react-navigation'; 6 7class LibraryItem extends React.Component { 8 9 const { title, description } = this.props.library; 10 const { naviate } = this.props.navigation; 11 console.log(this.props); 12 13 return ( 14 <Card onPress={() => navigate('Detail', library)}> 15 <Text>{title}</Text> 16 </Card> 17 ); 18 } 19} 20 21export default connect(StackNavigator)(LibraryItem);

consoleログの結果

Running application "library" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF

./components/LibraryList.js(リスト)

JavaScript

1import React from 'react'; 2import { ListView } from 'react-native'; 3import { connect } from 'react-redux'; 4import LibraryItem from './LibraryItem'; 5 6class LibraryList extends React.Component { 7 componentWillMount() { 8 const ds = new ListView.DataSource({ 9 rowHasChanged: (r1, r2) => r1 !== r2 10 }); 11 12 this.dataSource = ds.cloneWithRows(this.props.libraries); 13 } 14 15 renderRow(library) { 16 return <LibraryItem library={library} />; 17 } 18 19 render() { 20 return ( 21 <ListView 22 dataSource={this.dataSource} 23 renderRow={this.renderRow} 24 /> 25 ); 26 } 27} 28 29const mapStateToProps = state => { 30 return { libraries: state.libraries }; 31}; 32 33export default connect(mapStateToProps)(LibraryList);

./screens/ListScreen.js(スクリーン)

JavaScript

1import React from 'react'; 2import { View } from 'react-native'; 3import LibraryList from '../components/LibraryList'; 4 5const ListScreen = ({ navigation }) => { 6 return ( 7 <View> 8 <LibraryList /> 9 </View> 10 ); 11}; 12 13export default ListScreen;

./Router.js(ルーター)

JavaScript

1import React from 'react'; 2import { StackNavigator } from 'react-navigation'; 3import { ListScreen } from './screens'; 4import { DetailScreen } from './screens'; 5 6export default StackNavigator({ 7 List: { 8 screen: ListScreen 9 }, 10 Detail: { 11 screen: DetailScreen 12 }, 13},{ 14 initialRouteName: 'List', 15});

すみませんが、どうぞよろしくお願いします。

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

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

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

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

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

guest

回答3

0

StackNavigator で作成したものに対して connect してみてください

js

1const router = StackNavigator({ 2 List: { 3 screen: ListScreen 4 }, 5 Detail: { 6 screen: DetailScreen 7 }, 8},{ 9 initialRouteName: 'List', 10}); 11 12const mapStateToProps = state => { 13 return { libraries: state.libraries }; 14}; 15 16export default connect(mapStateToProps)(router);

投稿2018/01/30 02:25

januswel

総合スコア301

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

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

yamady

2018/01/30 14:33

ありがとうございます。非常に助かりました!
guest

0

class LibraryItem extends React.Component { render() { const { id, title } = this.props.library; return ( <Card onPress={() => navigation.navigate('Detail', library)} > <Text>{title}</Text> </Card> ); } }

navigation がきちんと参照できていないようです。
この文脈だと this.props.navigation として参照できますので試してみてください。

投稿2018/01/28 04:13

januswel

総合スコア301

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

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

yamady

2018/01/28 05:09

const { navigation } = this.props.navigation; こちらを追加するという認識ですよね。 追記してみたのですが、「Type Error: Cannot read property 'navigation' of undefined」というエラーが出てしまいました。。
januswel

2018/01/28 06:05

`this.props.navigation` が渡っていないですね `connect` するコンポーネントを Router.js で export しているものにするとどうでしょうか ?
yamady

2018/01/28 09:44

ご回答ありがとうございます。 LibraryItemとListScreenをconnectで繋ぐという意味でしょうか・・・?す理解力が乏しく申し訳ございません。
januswel

2018/01/28 10:12

StackNavigator に対して connect するということです
yamady

2018/01/29 06:44

ご返事ありがとうございます。調べて下記のコードで試して見たのですが、別のエラーが発生してしまいました。 追加コード(LibraryItem.js) export default connect(StackNavigator)(LibraryItem); エラー import MyScreen from './MyScreen'; ... libraries: { screen: MyScreen, }
januswel

2018/01/30 02:23

あ、 `./Router.js` 内でやる想定です コード貼り付けるので別で回答しますね
guest

0

ベストアンサー

それぞれを書き直して見ました
以下の点を勝手に修正してあります

  1. ListViewよりもFlatListがいいぽいのでそちらの書き方に
  2. CardがよくわからなかったのでTouchableOpacityに

なお、navigationはconnectを介して渡すのが面倒くさいと判断したので、直接パラメーターで渡すことで成功しました

js

1// ./components/LibrarItem.js 2 3import React from 'react'; 4import { Text, TouchableOpacity } from 'react-native'; 5 6class LibraryItem extends React.Component { 7 render() { 8 const { library, navigation } = this.props; 9 return ( 10 <TouchableOpacity onPress={() => navigation.navigate('Detail', library)}> 11 <Text>{library.title}</Text> 12 </TouchableOpacity> 13 ); 14 } 15} 16 17export default LibraryItem;

投稿2018/01/30 11:59

dialbird

総合スコア379

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

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

dialbird

2018/01/30 12:00

入らなかったので続き ```js // ./components/LibraryList.js import React from 'react'; import { FlatList } from 'react-native'; import { connect } from 'react-redux'; import LibraryItem from './LibraryItem'; class LibraryList extends React.Component { renderItem({ item }) { return <LibraryItem library={item} navigation={this.props.navigation}/>; } render() { const list = [ { id: 1, title: 'first' }, { id: 2, title: 'second' }, { id: 3, title: 'third' } ]; return ( <FlatList data={list} keyExtractor={item => item.id} renderItem={this.renderItem.bind(this)} /> ); } } export default connect(null)(LibraryList); // ./screens/ListScreen.js import React from 'react'; import { View } from 'react-native'; import { LibraryList } from '../components'; const ListScreen = ({navigation}) => { return ( <View> <LibraryList navigation={navigation}/> </View> ); }; export default ListScreen; ```
yamady

2018/01/30 14:33

ご丁寧にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問