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});
すみませんが、どうぞよろしくお願いします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/30 14:33