React他のコンポーネントのネイティブ設定状態

Question

HomeScreen.jsからBackGround.jsの状態を更新する必要があります。現在、私はJSONを以下の形式で取ります：

{ 
"navigate": "background", 
"media": "red", 
"sound_bool": "false", 
"sound": "" 
} 

を引数に指定します。ここからnavigateパラメータを使用して、ナビゲートするコンポーネントを決定します。状態を変更するために、JSONからナビゲートされているコンポーネントにメディアパラメータを送信したいと思います。これを行うにはどうしたらいいですか？

HomeScreen.js

import React, { Component } from 'react'; 
import {Image, Text, StyleSheet, Button, View, Dimensions, Vibration} from 'react-native'; 
import {StackNavigator} from 'react-navigation' 

console.ignoredYellowBox = [ 
    'Setting a timer' 
] 


const io = require('socket.io-client'); 
let server = 'http://redacted:3000'; 
let socket = io(server, { 
    transports: ['websocket'] 
}); 


export default class HomeScreen extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     backgroundColor: 'orange', 
    }; 


    } 
    static navigationOptions = { 
    header: null 
    } 
    render(){ 
    const { navigate } = this.props.navigation; 
    socket.on('json emission', json => { 
     var json_dump = JSON.parse(json); 
     var navi = json_dump.navigate; 
     var media = json_dump.media; 
     //parse JSON and send commands from here 
     switch(navi){ 
     case 'image': 
     navigate('IS'); 
     break; 
     case 'background': 
     navigate('BG'); 
     break; 
     case 'buttons': 
     navigate('BB'); 
     break; 
     default: 
     console.log("Error invalid navigation command: " + navi); 
     break; 
     } 
    }); 
     return (
     <View style={{backgroundColor: this.state.backgroundColor, flex: 1}}> 

     </View> 
    ); 
    } 
    } 

BackGround.js

import React, { Component } from 'react'; 
import {Image, Text, StyleSheet, Button, View, Dimensions, Vibration} from 'react-native'; 
import {StackNavigator} from 'react-navigation' 

export default class BackGround extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     backgroundColor: 'green' 
    }; 
    } 
    static navigationOptions = { 
    header: null 
} 
render(){ 
    const { navigate } = this.props.navigation; 
return (
<View style={{backgroundColor: this.state.backgroundColor, flex: 1}}> 
</View> 
); 
} 
} 

Answer 1

あなたは私はあなたがいると仮定しReact Navigationを、使用している場合は、あなたにオブジェクトを渡すことによってナビゲーション・ターゲットに小道具を渡すことができますあなたのnavigate()コールの2番目のパラメータ。例えば：

case 'image': 
    this.props.naviagtion.navigate('IS',{ media: media }); 
    break; 

メディアプロパティは、次にthis.props.navigation.state.params.media性で標的成分に利用できるようになります。

このコードはテストされていませんが、動作するはずです。