反应stacknavigator以提升状态howto

Question

i与StackNavigator一起在几个屏幕之间进行导航。在这些屏幕中，我将收集用户信息。我希望将此信息存储在一个状态下，以便每个视图都具有相同的信息。我得到了这个工作，但我认为这不是正确或理想的，因为我跟踪两个州。一个在开始视图中，当前视图中一个。因此，我的问题是，只能使用一个状态吗？

这是我的代码：

我的根类创建stacknavigator：

//@flow
import React from 'react';
import {StackNavigator} from 'react-navigation';
import Cart from './Cart';
import DeliveryAddress from './DeliveryAddress';
import Queue from './Queue';
export type State = {
  text: string,
  user: string,
  onChange: Function
}
const Screens = StackNavigator({
  Cart: {
    screen: Cart
  },
  Queue: {
    screen: Queue
  },
  DeliveryAddress: {
    screen: DeliveryAddress
  }
});
const AppNavigation = () => (<Screens/>);
export default class Root extends React.Component < Object,
State > {
  render() {
    return <AppNavigation/>;
  }
}

在这里我的第一个视图：

// @flow
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Text, View, Button} from 'react-native';
import DeliveryAddress from './DeliveryAddress';
import type {State}
from './Root';
export default class Cart extends Component < Object,
State > {
  static navigationOptions = {
    title: 'Welcome'
  };
  handleChange: Function;
  getState: Function;
  constructor(props : Object) {
    super(props);
    console.log("Construction Cart with state");
    console.log(this);
    console.log("props");
    console.log(this.props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      user: "Lucy",
      text: "Vul in",
      onChange: this.handleChange,
      getState: this.getState
    };
  }
  handleChange(data : Object) {
    this.setState(...data);
  }
  render() {
    const {navigate} = this.props.navigation;
    return (<View>
      <Text>This is your cart.</Text>
      <Button onPress={() => navigate('DeliveryAddress', this.state)} title="Go to delivery address"/>
    </View>);
  }
}

这是我的第二个视图：

// @flow
import React, {Component} from 'react';
import {Text, View, Button, TextInput} from 'react-native';
import type {NavigationScreenProp}
from 'react-navigation/src/TypeDefinition';
import type {State}
from './Root';
type NavigationType = {
  navigation: NavigationScreenProp < NavigationState >
}
type NavigationState = {
  params: {
    user: "bar"
  }
}
export default class DeliveryAddress extends Component < any,
State > {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({navigation} : NavigationType) => ({title: `Delivery address of ${navigation.state.params.user}`});
  handleChange: Function;
  constructor(props : Object) {
    super(props);
    this.state = props.navigation.state.params;
    console.log(props.navigation.state);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(data : Object) {
    this.setState(data);
    this.state.onChange(data);
  }
  render() {
    console.log("welkom in delivery address");
    // The screen's current route is passed in to `props.navigation.state`:
    const {navigate} = this.props.navigation;
    return (<View>
      <Text>User name: {this.state.user}</Text>
      <TextInput style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }} onChangeText={(text) => this.handleChange({text})} value={this.state.text}/>
      <Button onPress={() => navigate('Queue', this.state)} title={this.state.text}/>
    </View>);
  }
}

问题是我需要设置这样的两个状态：

  handleChange(data : Object) {
    this.setState(data);
    this.state.onChange(data);
  }

这是这样做的最好方法吗？

Answer 1

似乎有一个很好的解决方法：将redux与提供商一起使用。使用提供商，可以将信息添加到"上下文"：

  import {Provider, connect} from "react-redux";
  return (<Provider store={store}>
    <AppNavigation/>
  </Provider>);

提供商将将商店添加到上下文中。任何孩子（和孙子）都可以这样使用此商店：

    console.log("this.context");
    console.log(this.context);
    const {store} = this.context;

上面只有将其添加到组件中时才能工作：

Cart.contextTypes = {
  store: PropTypes.object
}

这是更多信息：https://egghead.io/lessons/reaeact-reaect-passing-the-store-down-implicitly-via-context