如何在 React-Native 中导航器的多个场景之间共享状态 [英] How to share state among multiple scenes of a Navigator in React-Native

问题描述

我想分享我应用所有屏幕的用户信息.(例如，类似于 webapps 中的会话).我如何才能在 react-native 中以适当的标准方式实现这一点.

I want to share User's information for all screens of my app. (e.g. kind of similar to session in webapps). How can I achieve that in proper standard way in react-native.

到目前为止，我已经通过将用户的所有信息作为主组件中的状态，然后将主组件的状态作为子组件的属性传递来实现这一点.以下是组件的缩短代码-

So far, I have achieved this by keeping User's all information as a state in Main component and then passing Main Component's state as property on child components. Below is the shortened code for components-

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

这是实现这一目标的正确方法吗?如果不是，实现此类功能的正确方法是什么.

Is this a proper way to achieve this? If no, What is the correct way to achieve such functionality.

推荐答案

在上层(控制器)组件中保持主状态并将数据作为道具向下传递是正确的.

You are correct in keeping the main state in the upper level (controller) component and passing data down as props.

另一种在应用程序中执行此操作并在它变得更复杂时管理状态的方法是使用像 Flux 或 Redux(Flux 的实现).

Another way to do this and manage state across your application as it gets more complex is to use a library / ideology like Flux or Redux (an implementation of Flux).

互联网上及其文档中提供了很多教程，至少应该可以帮助您入门.在深入研究 Redux 之前，我会开始学习 Flux.

There are quite a few tutorials available on the internet and in their documentation that should at least get you started. I would begin learning Flux before diving into Redux.

这篇关于如何在 React-Native 中导航器的多个场景之间共享状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！