Как поделиться состоянием между несколькими сценами Navigator в React-Native

Question

Я хочу поделиться информацией о пользователе для всех экранов моего приложения. (например, подобный сеансу в webapps). Как я могу достичь этого в стандартном стандартном режиме в режиме реагирования.

До сих пор я достиг этого, сохраняя всю информацию Пользователя как состояние в основном компоненте, а затем передавая состояние основного компонента как свойство дочерних компонентов. Ниже приведен сокращенный код для компонентов.

var MainComponent = React.createClass({ 
    getInitialState: function(){ 
    return { 
     user: { 
     mobileNumber: "", 
     emailId:"",   
     }, 
     userValidationStatus: false 
    }; 
    }, 
    _renderScene: function(){ 
    switch(route.id){ 
     case 1: 
      return <Screen1 navigator={navigator} parentState={this.state}/> 
     case 2: 
      return <Screen2 navigator={navigator} parentState={this.state} /> 
     default: 
      return <Screen1 navigator={navigator} /> 
    } 
    }, 
    render: function(){ 
    return (
     <Navigator 
      initialRoute={{ 
      id: 1, 
      title: 'someTitle'    
      }} 
      renderScene={this._renderScene} 
      navigator={this.props.navigator} 
     />  
    ); 
    } 
}); 

var Screen1 = React.createClass({ 
    render: function(){ 
    return ( 
     <View>  
      <TextInput 
       autoFocus='true'    
       onChangeText={(mobileNumber) => this.props.parentState.user.mobileNumber=mobileNumber} 
       value={this.state.mobileNumber} 
      /> 
      <TextInput 
       onChangeText={(emailId) => this.props.parentState.user.emailId=emailId} 
       value={this.state.emailId} 
      /> 
     </View> 
    ); 
    } 
}); 
var Screen2 = React.createClass({ 
    render: function(){ 
    return ( 
     <View>  
      <TextInput 
       autoFocus='true'    
       onChangeText={(mobileNumber) => this.props.parentState.user.mobileNumber=mobileNumber} 
       value={this.state.mobileNumber} 
      /> 
      <TextInput 
       onChangeText={(emailId) => this.props.parentState.user.emailId=emailId} 
       value={this.state.emailId} 
      /> 
     </View> 
    ); 
    } 
}); 

Это правильный способ достичь этого? Если нет, то каков правильный способ достижения такой функциональности.

Answer 1

Вы правильно держите основное состояние в компоненте верхнего уровня (контроллера) и передаете данные вниз как реквизиты.

Другой способ сделать это и управлять состоянием через ваше приложение по мере его усложнения - использовать библиотеку/идеологию, такую ​​как Flux или Redux (реализация Flux).

В Интернете имеется документация, в которой вы должны позаботиться о том, чтобы начать работу. Я начал бы изучать Flux перед погружением в Redux.