如何在页面之间/跨页面传递/发送状态？
如何在页面之间/跨页面传递/发送状态？
提问于 2019-01-11 02:56:20
我已经在我的应用程序中编写了一些代码，但它似乎可以通过全局变量传递。
我在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>
);我想使用跨页面(Home.js & Profile.js)的state技术传递username值。
回答 1
Stack Overflow用户
发布于 2019-01-11 02:59:55
您可以使用redux进行状态管理。\
或者，如果你的应用程序不太复杂，你可以直接转到Context Api。
更新:这是一个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'的userContext。
无论何时你想要访问它或者改变它，你只需要使用消费者。
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54135230
复制相关文章
相似问题
腾讯云开发者
