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

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

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

解決済

1回答

1361閲覧

createAppContainerへの初期値の渡し方

kimkim

総合スコア142

React Native

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2019/11/11 05:39

編集2019/11/18 03:01

現状

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

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で保持しているuserDataPostTab1,2で使用したいです。
この時どのようにすればいいのか教えていただきたいです。

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

"react-navigation": "^3.11.1"

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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});

投稿2019/11/18 02:18

kimkim

総合スコア142

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問