Question

我想分享我的应用的所有屏幕的用户信息。（例如类似于webapps中的会话）。如何以反应原生的正确标准方式实现这一目标。

到目前为止，我已经通过将User的所有信息保持为Main组件中的状态，然后将Main Component的状态作为子组件的属性传递来实现此目的。以下是组件的缩短代码 -

 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的实现）。

互联网及其文档中有相当多的教程，至少可以帮助您入门。我会在潜入Redux之前开始学习Flux。

如何在React-Native中的导航器的多个场景之间共享状态

1 个答案: