如何在页面之间/跨页面传递/发送状态

Question

我已经在我的应用程序中做了一些代码，但它似乎可以通过全局变量传递。

我在 Auth.js 中设置了一个全局变量。

export const _values = { 
  username: ''
};

从 SignUp.js 获取用户名值。

import { onSignIn, onSignUp, _values } from "../Auth";
export default ({ navigation }) => (
  <View style={{ paddingVertical: 20 }}>
    <Card title="SIGN UP">
      <FormLabel>Email</FormLabel>
      <FormInput 
        placeholder="Email address..."
        onChangeText={(val) => _values.username = val}
      />
     ...
    </Card>
  </View>
);

我想使用state技术跨页面传递用户名值（Home.js & Profile.js）。

参考资料：https://github.com/datomnurdin/auth-reactnative

Answer 1

您可以使用redux进行状态管理。

https://redux.js.org/

或者，如果您的应用程序不太复杂，您可以转到 Context Api .

https://medium.com/@505aaron/a-practical-react-native-problem-solved-with-the-context-api-eecaf2e05202

更新：这是一个context api的演示。

假设您必须更改一个用户，并且您希望该用户在每个组件中。每当用户更改时，您都需要更新的用户。因此，您需要在每个组件中访问该用户，并且也能够更改它。

首先创建一个用户上下文，让我们制作一个名为 UserContext.js 的文件：

import React from 'react';
const Context = React.createContext('username');
export class UserStore extends React.Component {
    state = {
        language: 'username'
    }
    onUserChange = username => this.setState({ username });
    render() {
        return (
            <Context.Provider value={{ ...this.state, onUserChange: this.onUserChange }}>
                {this.props.children}
            </Context.Provider>
        );
    }
}
export default Context;

现在，您有一个初始值为 username = 'username' 的用户上下文。

每当您想访问或更改它时，您只需要使用消费者。

import React from 'react';
import Context from '../contexts/UserContext';
class UserSelector extends React.Component {
    renderContent = (store) => {    
        return (
            <View>
                <Text>Choose a User</Text>
                 <Button 
                  title='Change User'
                  onPress ={() =>store.onUserChange('mark')}
                  />
            </View>
        );
    }
    render() {
        return (
            <Context.Consumer>
                {this.renderContent}
            </Context.Consumer>
        );
    }
}
export default UserSelector;