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

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

ただいまの
回答率

90.34%

  • React.js

    1263questions

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

  • React Native

    293questions

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

  • Redux

    175questions

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,523

yamady

score 170

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

 エラー

TypeError: Cannot read property 'navigate' of undefined


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

 ソースコード

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

import React from 'react';
import { Text } from 'react-native';
import { Card } from './common';
import { connect } from 'react-redux';
import { StackNavigator } from 'react-navigation';

class LibraryItem extends React.Component {

    const { title, description } = this.props.library;
    const { naviate } = this.props.navigation;
    console.log(this.props);

    return (
       <Card onPress={() => navigate('Detail', library)}>
         <Text>{title}</Text>
       </Card>
     );
   }
}

export 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(リスト)

import React from 'react';
import { ListView } from 'react-native';
import { connect } from 'react-redux';
import LibraryItem from './LibraryItem';

class LibraryList extends React.Component {
  componentWillMount() {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.dataSource = ds.cloneWithRows(this.props.libraries);
  }

  renderRow(library) {
    return <LibraryItem library={library} />;
  }

  render() {
    return (
      <ListView
        dataSource={this.dataSource}
        renderRow={this.renderRow}
      />
    );
  }
}

const mapStateToProps = state => {
  return { libraries: state.libraries };
};

export default connect(mapStateToProps)(LibraryList);

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

import React from 'react';
import { View } from 'react-native';
import LibraryList from '../components/LibraryList';

const ListScreen = ({ navigation }) => {
  return (
    <View>
      <LibraryList />
    </View>
  );
};

export default ListScreen;

./Router.js(ルーター)

import React from 'react';
import { StackNavigator } from 'react-navigation';
import { ListScreen } from './screens';
import { DetailScreen } from './screens';

export default StackNavigator({
  List: {
    screen: ListScreen
  },
  Detail: {
    screen: DetailScreen
  },
},{
  initialRouteName: 'List',
});

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

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 19:12

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

    キャンセル

  • 2018/01/29 15:44

    ご返事ありがとうございます。調べて下記のコードで試して見たのですが、別のエラーが発生してしまいました。

    追加コード(LibraryItem.js)
    export default connect(StackNavigator)(LibraryItem);

    エラー
    import MyScreen from './MyScreen';
    ...
    libraries: {
    screen: MyScreen,
    }

    キャンセル

  • 2018/01/30 11:23

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

    キャンセル

+1

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

const router = StackNavigator({
  List: {
    screen: ListScreen
  },
  Detail: {
    screen: DetailScreen
  },
},{
  initialRouteName: 'List',
});

const mapStateToProps = state => {
  return { libraries: state.libraries };
};

export default connect(mapStateToProps)(router);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/30 23:33

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

    キャンセル

checkベストアンサー

0

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

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

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

// ./components/LibrarItem.js

import React from 'react';                                                                                                                                                                                   
import { Text, TouchableOpacity } from 'react-native';                                                                                                                                                       

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

export default LibraryItem;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/30 21: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;
    ```

    キャンセル

  • 2018/01/30 23:33

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

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • React.js

    1263questions

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

  • React Native

    293questions

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

  • Redux

    175questions