createAppContainerへの初期値の渡し方

現状

簡易版ですが、現在以下のソースコードのような画面構成になっています。

javaScript
1import React, { Component } from 'react';
2import { 
3  Text, 
4  View, 
5  StyleSheet ,
6  TouchableOpacity,
7} from 'react-native';
8
9import {
10  createAppContainer,
11  createStackNavigator,
12  createMaterialTopTabNavigator,
13} from "react-navigation";
14
15class MainScreen extends Component {
16  render(){
17    return(
18      <View style={styles.container}>
19        <TouchableOpacity
20          style={{width:100,height:30,backgroundColor:"lightblue",justifyContent:"center",alignItems:"center"}}
21          onPress={() => this.props.navigation.navigate("Post",{userData:{name:"hoge太郎"}})}
22        >
23          <Text>to PostScreen</Text>
24        </TouchableOpacity>
25      </View>
26    )
27  }
28}
29
30class PostTab1 extends Component {
31  render(){
32    return(
33      <View style={styles.container}>
34        <Text>ここで userData を使いたい！！</Text>
35      </View>
36    )
37  }
38}
39
40class PostTab2 extends Component {
41  render(){
42    return(
43      <View style={styles.container}>
44        <Text>ここで userData を使いたい！！</Text>
45      </View>
46    )
47  }
48}
49
50const topTab = createMaterialTopTabNavigator({
51  tab1:{
52    screen:PostTab1,
53  },
54  tab2:{
55    screen:PostTab2,
56  }
57})
58
59const TopTabContainer = createAppContainer(topTab)
60
61class PostScreen extends Component {
62  render(){
63    return(
64      <View style={{flex:1,backgroundColor:"#ecf0f1"}}>
65        <View style={{height:60,width:"100%",flexDirection:"row",alignItems:"center",padding:10}}>
66          <View style={{width:40,height:40,borderRadius:20,backgroundColor:"orange",marginRight:10}}/>
67          <Text>name : {this.props.navigation.getParam("userData",{name:"no name"}).name}</Text>
68        </View>
69        <TopTabContainer />
70      </View>
71    )
72  }
73}
74
75const stack = createStackNavigator({
76  Main:{
77    screen:MainScreen,
78    navigationOptions:() => ({
79      title:"Main"
80    }),
81  },
82  Post:{
83    screen:PostScreen,
84    navigationOptions:() => ({
85      title:"Post"
86    }),
87  }
88})
89
90const StackContainer = createAppContainer(stack);
91
92export default StackContainer;
93
94const styles = StyleSheet.create({
95  container: {
96    flex: 1,
97    justifyContent: 'center',
98    alignItems:"center",
99    backgroundColor: '#ecf0f1',
100  },
101});

こちらのリンクからこのソースコードのSnackに飛べます

このような状況で、MainScreenで保持しているuserDataをPostTab1,2で使用したいです。
この時どのようにすればいいのか教えていただきたいです。

補足情報（FW/ツールのバージョンなど）

"react-navigation": "^3.11.1"

すこし前のバージョンなのですが、react-navigationはこちらのバージョンのものを使用しています。

行動規範の内容に同意します

回答1件

自己解決

createStackNavigator(...)などによって作成されたナビゲータコンポーネントに渡せるpropsの中に
・screenPropsというpropsがありました。
https://reactnavigation.org/docs/en/stack-navigator.html#navigator-props
こちらを使用することでタブスクリーンに初期値を与えることができ、目的の処理を行うことができました。

javascript
1import React, { Component } from 'react';
2import { 
3  Text, 
4  View, 
5  StyleSheet ,
6  TouchableOpacity,
7} from 'react-native';
8
9import {
10  NavigationActions,
11  createAppContainer,
12  createStackNavigator,
13  createMaterialTopTabNavigator,
14} from "react-navigation";
15
16class MainScreen extends Component {
17
18  constructor(props){
19    super(props)
20    this.state = {
21      userData:{
22        name:"hoge太郎"
23      }
24    }
25  }
26
27  render(){
28    return(
29      <View style={styles.container}>
30        <TouchableOpacity
31          style={{width:100,height:30,backgroundColor:"lightblue",justifyContent:"center",alignItems:"center"}}
32          onPress={() => this.props.navigation.navigate("Post",this.state)}
33        >
34          <Text>to PostScreen</Text>
35        </TouchableOpacity>
36        <Text>Tab画面に渡したいデータ</Text>
37        <Text>this.state = {JSON.stringify(this.state)}</Text>
38      </View>
39    )
40  }
41}
42
43class PostTab1 extends Component {
44
45  render(){
46    return(
47      <View style={styles.container}>
48        <Text>ここで userData を使いたい！！</Text>
49        <Text>this.props.screenProps.userData = </Text>
50        <Text>{JSON.stringify(this.props.screenProps.userData)}</Text>
51      </View>
52    )
53  }
54}
55
56class PostTab2 extends Component {
57
58  render(){
59    return(
60      <View style={styles.container}>
61        <Text>ここで userData を使いたい！！</Text>
62        <Text>this.props.screenProps.userData = </Text>
63        <Text>{JSON.stringify(this.props.screenProps.userData)}</Text>
64      </View>
65    )
66  }
67}
68
69const topTab = createMaterialTopTabNavigator({
70  tab1:{
71    screen:PostTab1,
72  },
73  tab2:{
74    screen:PostTab2,
75  }
76})
77
78const TopTabContainer = createAppContainer(topTab)
79
80class PostScreen extends Component {
81  render(){
82    return(
83      <View style={{flex:1,backgroundColor:"#ecf0f1"}}>
84        <View style={{height:60,width:"100%",flexDirection:"row",alignItems:"center",padding:10}}>
85          <View style={{width:40,height:40,borderRadius:20,backgroundColor:"orange",marginRight:10}}/>
86          <Text>{this.props.navigation.getParam("userData",{name:"no name"}).name}</Text>
87        </View>
88        <TopTabContainer 
89          screenProps={this.props.navigation.state.params} //<=ここのscreenPropsに渡したいデータを入れる
90        />
91      </View>
92    )
93  }
94}
95
96const stack = createStackNavigator({
97  Main:{
98    screen:MainScreen,
99    navigationOptions:() => ({
100      title:"Main"
101    }),
102  },
103  Post:{
104    screen:PostScreen,
105    navigationOptions:() => ({
106      title:"Post"
107    }),
108  }
109})
110
111const StackContainer = createAppContainer(stack);
112
113export default StackContainer;
114
115const styles = StyleSheet.create({
116  container: {
117    flex: 1,
118    justifyContent: 'center',
119    alignItems:"center",
120    backgroundColor: '#ecf0f1',
121  },
122});