0

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

这是我的代码：

我创建 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);
  }

这是最好的方法吗？

4

1 回答 1

0

似乎有一个很好的方法可以解决这个问题：Using Redux with a Provider。通过提供者，可以将信息添加到“上下文”：

  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/react-redux-passing-the-store-down-implicitly-via-context

于 2017-12-15T13:50:17.483 回答