Réagissez la communication avec les parents autochtones

Parent-Enfant de la communication semble pas de problème à l'aide de transmettre des accessoires:

mainpage.ios.js code:

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

Puis sur otherpage.ios.js je peux utiliser la variable à l'aide de ce.accessoires de jeu.de la valeur, mais si je peux mettre à jour la valeur sur otherpage.ios.js comment fait-il communiquées à l'mainpage.ios.js?

source d'informationauteur Hasen

  1. 20

    Vous voulez passer un rappel puis le passer à travers les accessoires, probablement en utilisant la componentWillReceiveProps crochet de configuration devient de plus en plus avancé.

    Si vous faites cela beaucoup, alors oui, vous devriez être à l'aide de Flux ou Redux ou similaire. 

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

    En outre, si vous utilisez les Composants Statiques lorsque vous savez que l'état n'est pas nécessaire dans le composant secondaire, vous pouvez créer beaucoup plus de re-utilisable composants fonctionnels:

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

    Je vous recommande fortement d'utiliser le Flux ici. Quand vous vous trouvez dans le besoin de divers éléments ayant besoin de la même information, alors cela signifie que vous avez besoin de Flux. Vous pouvez bien sûr utiliser un tas de rappels et ainsi de suite, mais que votre application se développe et devient de plus en plus complexe, il sera beaucoup plus difficile à gérer sans quelque chose comme flux.

    Avec le flux, vous aurez votre page d'accueil composant écouter des changements et une fois que le changement a eu lieu faire quelque chose. Par exemple:

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