Как использовать глобальные переменные в React Native?

Ответ 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 в каждый файл. Старайтесь не изменять их!

Ответ 2

Попробуйте использовать global.foo = bar в index.android.js или index.ios.js, тогда вы можете позвонить в другой файл js.

Ответ 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 вы можете передавать данные через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне. Существует большое предупреждение, которое является экспериментальной функцией и может разорваться в будущем, но я бы предположил, что эта функция будет вокруг, учитывая большинство популярных фреймворков, таких как Redux, используют context экстенсивно.

Основное преимущество использования context v.s. глобальная переменная context является "областью" для поддерева (это означает, что вы можете определить разные области действия для разных поддеревьев).

Обратите внимание, что вы не должны передавать свои данные модели через context, так как изменения в context не будут запускать цикл рендеринга компонентов. Тем не менее, я считаю это полезным в некоторых случаях использования, особенно при реализации собственной пользовательской структуры или рабочего процесса.

Ответ 4

Вы можете использовать глобальное ключевое слово для решения этой проблемы.

Предположим, что вы хотите объявить переменную с именем isFromManageUserAccount в качестве глобальной переменной, вы можете использовать следующий код.

global.isFromManageUserAccount=false;

После такого объявления вы можете использовать эту переменную в любом месте приложения.

Ответ 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. 
   }

Таким образом, вы можете делиться своими данными через приложение, не каждый из которых должен взаимодействовать друг с другом.

Ответ 6

Как вы должны делать это в React Native (как я понимаю), это, например, сохранение вашей "глобальной" переменной в вашем index.js. Оттуда вы можете передать его с помощью реквизита.

Пример:

    class MainComponent extends Component {

        componentDidMount() {
            //Define some variable in your component
            this.variable = "What 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>
            );
        }

    }