Question

在React Native中我希望在不同屏幕之间移动时使用全局变量

任何人都可以帮助我如何实现它吗？

Answer 1

React Native中的全局范围是全局变量。例如global.foo = foo，那么你可以在任何地方使用global.foo。

但是不要滥用它！在我看来，全局范围可能用于存储全局配置或类似的东西。在不同视图之间共享变量，作为您的描述，您可以选择许多其他解决方案（使用redux，flux或将它们存储在更高的组件中），全局范围不是一个好的选择。

定义全局变量的一个好习惯是使用js文件。例如global.js

global.foo = foo;
global.bar = bar;

然后，确保在项目初始化时执行。例如，在index.js中导入文件：

import './global.js'
// other code

现在，您可以在任何地方使用全局变量，而不需要在每个文件中导入global.js。尽量不要修改它们！

Answer 2

尝试在 index.android.js 或 index.ios.js 中使用global.foo = bar，然后您可以调用其他文件j。

Answer 3

您可以考虑利用React的Context功能。

class NavigationContainer extends React.Component {
    constructor(props) {
        super(props);
        this.goTo = this.goTo.bind(this);
    }
    goTo(location) {
        ...
    }
    getChildContext() {
        // returns the context to pass to children
        return {
            goTo: this.goTo
        }
    }
    ...
}

// defines the context available to children
NavigationContainer.childContextTypes = {
    goTo: PropTypes.func
}

class SomeViewContainer extends React.Component {
    render() {
        // grab the context provided by ancestors
        const {goTo} = this.context;
        return <button onClick={evt => goTo('somewhere')}>
            Hello
        </button>
    }
}

// Define the context we want from ancestors
SomeViewContainer.contextTypes = {
    goTo: PropTypes.func
}

使用context，您可以通过组件树传递数据，而无需在每个级别手动传递道具。这里有一个big warning是一个实验性功能，将来可能会中断，但我认为这个功能可以使用，因为Redux等大多数流行框架都广泛使用context。

使用context v.s.的主要优点全局变量context是＆＃34;范围＆＃34;到子树（这意味着您可以为不同的子树定义不同的范围）。

请注意，您不应通过context传递模型数据，因为context 中的更改不会触发React的组件渲染周期。但是，我发现它在某些用例中很有用，特别是在实现自己的自定义框架或工作流时。

Answer 4

您可以使用global关键字解决此问题。

假设您要声明一个名为isFromManageUserAccount的变量作为全局变量，则可以使用以下代码。

global.isFromManageUserAccount=false;

这样声明后，您可以在应用程序中的任何位置使用此变量。

Answer 5

设置助焊剂容器

简单的例子

import alt from './../../alt.js';

    class PostActions {
        constructor(){
        this.generateActions('setMessages');
        }

        setMessages(indexArray){
            this.actions.setMessages(indexArray);
        }
    }


export default alt.createActions(PostActions);

商店看起来像这样

class PostStore{

    constructor(){

       this.messages = [];

       this.bindActions(MessageActions);
    }




    setMessages(messages){
        this.messages = messages;
    }
}

export default alt.createStore(PostStore);

然后，每个侦听商店的组件都可以共享此变量在你的构造函数中你应该抓住它

constructor(props){
    super(props);

   //here is your data you get from the store, do what you want with it 
    var messageStore = MessageStore.getState();

}


    componentDidMount() {
      MessageStore.listen(this.onMessageChange.bind(this));
    }

    componentWillUnmount() {
      MessageStore.unlisten(this.onMessageChange.bind(this));
    }

    onMessageChange(state){ 
        //if the data ever changes each component listining will be notified and can do the proper processing. 
   }

这样，您可以在整个应用程序中共享数据，而不必每个组件都相互通信。

Answer 6

你应该在React Native中这样做的方式（据我所知），是通过保存你的全球＆＃39;例如，index.js中的变量。然后你可以使用道具传递它。

示例：

    class MainComponent extends Component {

        componentDidMount() {
            //Define some variable in your component
            this.variable = "What's up, I'm a variable";
        }
        ...
        render () {
            <Navigator
                renderScene={(() => {
                    return(
                        <SceneComponent
                                //Pass the variable you want to be global through here
                                myPassedVariable={this.variable}/>
                    );
                })}/>
        }
    }


    class SceneComponent extends Component {

        render() {
            return(
                <Text>{this.props.myPassedVariable}</Text>
            );
        }

    }

Answer 7

如果您只想将某些数据从一个屏幕传递到下一个屏幕，则可以使用navigation.navigate方法将它们传递如下：

<Button onPress={()=> {this.props.navigation.navigate('NextScreen',{foo:bar)} />

，在“ NextScreen”中，您可以使用navigation.getParam()方法访问它们：

let foo=this.props.navigation.getParam(foo);

但是如果您要传递多个变量，它可能会变得非常“混乱”。

如何在React Native中使用全局变量？

7 个答案: