Réagir État de réglage d'un autre composant

Question

J'ai besoin de mettre à jour l'état de BackGround.js à partir de HomeScreen.js. Actuellement, je prends en JSON du format:

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

comme argument sur la douille. De là, j'utilise le paramètre navigate pour déterminer le composant vers lequel naviguer. Je voudrais envoyer le paramètre media du JSON au composant sur lequel on navigue, afin de changer d'état. Comment devrais-je faire cela?

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

Si vous utilisez React Navigation, que je suppose que vous êtes, vous pouvez passer un accessoire à la cible de navigation en passant un objet comme le deuxième paramètre dans votre appel navigate(). Par exemple:

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

La propriété des médias seront alors disponibles dans le composant cible dans la propriété this.props.navigation.state.params.media.

Ce code n'a pas été testé, mais cela devrait fonctionner.