[react-navigation]DrawerNavigator Drawerから遷移元へ値の受渡し

実現したいこと

DrawerNavigatorで遷移したDrawer(以下、SideBar.js)で選択された値を
遷移元(以下、HomeScreen.js)に渡したい。(画面遷移もしたい)

###不明点
SideBar.jsでthis.navigation.navigate("Home", params)を呼ぶことで、
期待するHomeScreenへ遷移し値を渡せると思ったが、遷移しなかった。
this.navigation.openDrawer()やgoBack()で遷移するものの、値の渡し方が分からない。

index.jsでSidebarを呼ぶ際、propsでコールバックを渡すことも考えたが、
渡したいのはHomeScreenであり、SideBar→index.js→HomeScreenの値の連携方法が
分からなかった。

App.js

javascript
1import React from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3import HomeScreen from "./src/HomeScreen/index.js";
4
5export default class App extends React.Component {
6  constructor() {
7    super();
8    this.state = {
9      isReady: false
10    };
11  }
12  render() {
13    return <HomeScreen />
14  }
15}
16

src/HomeScreen/index.js

javascript
1import React, {Component } from "react";                                           
2import HomeScreen from "./HomeScreen.js";
3import SideBar from "../SideBar/SideBar.js";
4import { createAppContainer, createDrawerNavigator } from "react-navigation";
5
6const HomeScreenRouter = createDrawerNavigator(
7  {
8    Home: { screen: HomeScreen },
9  },
10  {
11    contentComponent: (props) => <SideBar {...props} />
12  }
13);
14   
15export default createAppContainer(HomeScreenRouter);

src/HomeScreen/HomeScreen.js

javascript
1export default class HomeScreen extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      value: {},
6    };
7  }
8  render() {
9    return() {
10      <Container style={styles.wrapper}>                                                                              
11        <Header hasTabs>
12          <Left>
13            <Button
14              transparent
15              onPress={() => this.props.navigation.openDrawer()}
16            >
17              <Icon name="menu" />
18            </Button>
19          </Left>
20          <Body>
21    }
22  }

src/Sidebar/Sidebar.js

javascript
1import React from "react";
2import { AppRegistory, Image, StatusBar } from "react-native";
3import { Container, Content, Text, List, ListItem } from "native-base";
4import Store from "../Store/Store.js";
5const routes = [];
6
7export default class SideBar extends React.Component {
8  constructor(props) {
9    super(props);
10  }
11  componentDidMount() {
12    Store.getAllkeys().then((ks) =>{
13      for (let i = 0; i < ks.length; i++) {
14        routes[i] = ks[i];
15      }
16    });
17  }
18  render() {
19    let item = [];
20    for (let i = 0; i < routes.length; i++) {
21      item.push(
22        <ListItem
23          key={ i }
24          onPress={() => { 
25//            this.props.navigation.navigate("Home", param);
26            this.props.navigation.goBack();
27          }}
28        >
29          <Text>
30            {routes[i]}
31          </Text>
32        </ListItem>
33      );
34    }
35    return(
36      <Container>
37        <Content>
38          { item }
39        </Content>
40      </Container>
41    )
42  }
43}
44

json
1{
2  "main": "node_modules/expo/AppEntry.js",
3  "scripts": {
4    "start": "expo start",
5    "android": "expo start --android",
6    "ios": "expo start --ios",
7    "debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=19001'",
8    "eject": "expo eject"
9  },
10  "dependencies": {
11    "@nart/react-native-swiper": "^1.5.13",
12    "expo": "^32.0.0",
13    "native-base": "^2.12.0",
14    "react": "16.5.0",
15    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
16    "react-native-scrollable-tab-view": "^0.10.0",
17    "react-navigation": "^3.3.0"
18  },
19  "devDependencies": {
20    "babel-preset-expo": "^5.0.0"
21  },
22  "private": true
23}
24