質問編集履歴

connectでStackNavigationを追加

2018/01/29 06:45

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -30,6 +30,10 @@
 import { Card } from './common';
+import { connect } from 'react-redux';
+import { StackNavigator } from 'react-navigation';
 class LibraryItem extends React.Component {
@@ -60,7 +64,7 @@
-export default LibraryItem;
+export default connect(StackNavigator)(LibraryItem);
 ```

consoleログの結果

2018/01/29 06:45

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -40,6 +40,8 @@
     const { naviate } = this.props.navigation;
+    console.log(this.props);
     return (
@@ -64,6 +66,16 @@
+consoleログの結果
+```
+Running application "library" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
+```
 > ./components/LibraryList.js（リスト）

修正点を更新しました

2018/01/29 06:42

投稿

yamady

スコア176

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,22 +1,24 @@
-いつもお世話になっております。
+React Nativeの画面遷移でReact Navigationを導入したいと考えています。
-React NativeでUdemyの下記オンラインコース（ソースコード）を改良したいと考えています。このソースコードでは、サムネイルカードを押した時にその下記に説明が出てくるような仕組みとなっているのですが、今回はクリックした際に別の画面に遷移し詳細を表示したいと考えています。
+イメージとしては、ホームにいくつかサムネイルが並んでいて、これをクリックすると詳細画面に遷移するというのが実現したい内容です。
+## エラー
+```
-[https://github.com/StephenGrider/ReactNativeReduxCasts/blob/master/tech_stack](https://github.com/StephenGrider/ReactNativeReduxCasts/blob/master/tech_stack)
+TypeError: Cannot read property 'navigate' of undefined
+```
-これにあたり、react-navigationを入れてみたのですが、何度押しても挙動を起こしてくれず困っています。
+this.props.navigationが渡ってきていないようなのですが、その渡し方がいまいちわかっていません。
-遷移先で、紐づいた詳細文を表示させる方法をご教示いただければと思います。
+## ソースコード
-> ./components/libraryItem.js
+> ./components/LibrarItem.js（サムネイル）
@@ -32,99 +34,101 @@
 class LibraryItem extends React.Component {
+    const { title, description } = this.props.library;
+    const { naviate } = this.props.navigation;
+    return (
+       <Card onPress={() => navigate('Detail', library)}>
+         <Text>{title}</Text>
+       </Card>
+     );
+   }
+}
+export default LibraryItem;
+```
+> ./components/LibraryList.js（リスト）
+```JavaScript
+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() {
-    const { id, title } = this.props.library;
     return (
-       <Card
+      <ListView
-        onPress={() => navigation.navigate('Detail', library)}
-       >
-        <Text>{title}</Text>
+        dataSource={this.dataSource}
+        renderRow={this.renderRow}
-       </Card>
+      />
-     );
+    );
-   }
+  }
 }
-export default LibraryItem;
-```
-> ./components/LibraryList.js
-```JavaScript
-import React from 'react';
-import { ListView } from 'react-native';
-import { connect } from 'react-redux';
-import LibraryItem from './LibraryItem';
-class LibraruList 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 { libraris: state.libraris };
+  return { libraries: state.libraries };
 };
@@ -132,13 +136,9 @@
 export default connect(mapStateToProps)(LibraryList);
-```
+```
-> ./screens/ListScreens.js
+> ./screens/ListScreen.js（スクリーン）
@@ -168,126 +168,50 @@
+export default ListScreen;
+```
+> ./Router.js（ルーター）
+```JavaScript
+import React from 'react';
+import { StackNavigator } from 'react-navigation';
-ListScreen.navigationOptions = () => ({
+import { ListScreen } from './screens';
+import { DetailScreen } from './screens';
+export default StackNavigator({
+  List: {
+    screen: ListScreen
+  },
+  Detail: {
+    screen: DetailScreen
+  },
+},{
-  title: 'Home'
+  initialRouteName: 'List',
 });
-export default ListScreen;
-```
+```
-> ./screens/DetailScreen.js
-```javaScript
-import React from 'react';
-import { View, Text } from 'react-native';
-const DetailScreen = ({ navigation }) => {
-  return (
-    <View>
-      <Text>{library.description}</Text>
-    </View>
-  );
-};
-DetailScreen.navigationOptions = {
-  title: 'Detail',
-};
-export default DetailScreen;
-```
-> ./Router.js
-```JavaScript
-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',
-});
-```
-> ./reducers/LibraryReducer.js
-```JavaScript
-import data from './LibraryList.json'
-export default () => data;
-```
-> ./reducers/LibraryList.json
-```
-[
-  {
-    "id": 0,
-    "title": "react native",
-    "description": "zzzzzzzzzzzzzzz"
-  }
-]
-```
-ホーム表示はできているのですが、その先にいけません。。。
-どうぞ宜しくお願い致します(_ _)
+すみませんが、どうぞよろしくお願いします。