Reagire Native Parent Bambino comunicazione

Question

Parent

comunicazione bambino sembra nessun problema ad utilizzare oggetti di scena passa:

mainpage.ios.js codice:

var OtherPage = require('./otherpage'); 
<OtherPage value={2}/> 

Poi otherpage.ios.js posso utilizzare la variabile di utilizzare questo .props.value ma poi se aggiorno il valore su otherpage.ios.js come viene comunicato a mainpage.ios.js?

Answer 1

Si potrebbe passare un callback poi passare attraverso oggetti di scena, probabilmente utilizzando il gancio componentWillReceiveProps come la configurazione diventa più avanzata.

Se si sta facendo questo molto sì, si dovrebbe usare Flux o Redux o simili.

import React, { 
    Component, 
    TouchableOpacity, 
    Text, 
} from 'react-native'; 


class Main extends Component { 

    constructor() { 
    super(); 
    this.state = { 
     data: 'default' 
    } 
    } 

    onChange = (data) => { 
    console.log(`Data changes to ${data} !`); 
    this.setState({ data }); 
    } 

    render() { 
    const { data } = this.state; 
    return <Other data={data} onChange={this.onChange}></Other>; 
    } 

} 

class Other extends Component { 
    render() { 
    const { data } = this.props; 
    console.log(`Other Component Data is ${data}`); 
    return (
     <TouchableOpacity onPress={() => {this.props.onChange('Success!')} }> 
     <Text style={{fontSize: 30}}>{data}</Text> 
     </TouchableOpacity> 
    ); 
    } 
} 

Inoltre, se si utilizzano componenti statici quando sai stato non è necessaria nel componente secondaria, si può costruire molto di più componenti funzionali riutilizzabili:

class Main extends Component { 

    constructor() { 
    super(); 
    this.state = { 
     data: 'default' 
    } 
    } 

    onChange = (data) => { 
    console.log(`Data changes to ${data} !`); 
    this.setState({ data }); 
    } 

    render() { 
    const { data } = this.state; 
    return <Other data={data} onChange={this.onChange}></Other>; 
    } 

} 

const Other = ({ data, onChange }) => { 
    return (
     <TouchableOpacity onPress={() => {onChange('Success!')} }> 
     <Text style={{fontSize: 30}}>{data}</Text> 
     </TouchableOpacity> 
); 
} 

Answer 2

Consiglio vivamente di utilizzare Flux qui. Quando ti trovi nella necessità di vari componenti che richiedono le stesse informazioni, significa che hai bisogno di Flux. Ovviamente puoi usare un sacco di callback e così via, ma man mano che la tua app cresce e diventa più complessa, sarà molto più difficile gestirla senza qualcosa di simile al flusso.

Con il flusso, il componente della pagina principale ascolterà le modifiche e una volta apportato il cambiamento, fare qualcosa. Per esempio:

mainpage: 

componentDidMount() { 
    SomeStore.addChangeListener(this.updateComponent) 
} 

componentWillUnmount() { 
    SomeStore.removeChangeListener(this.updateComponent) 
} 

updateComponent() { 
    this.setState value: SomeStore.getValue() 
} 



otherpage: 

toggle() { 
    SomeActions.change(this.props.value + 1) 
} 

render() { 
    <TouchableOpacity onPress={this.toggle}> 
    <View>Some View</View> 
    </ToucableOpacity> 
}