Имеет ли React Native глобальный охват? Если нет, как я могу имитировать это?

Я не смог найти ничего подобного

$rootScope

для React Native, и я хочу разделить пару переменных между разными представлениями.

Ответ 1

Сохранение переменных в глобальной области - это немного анти-шаблон в React. Реакт предназначен для использования с односторонним потоком данных, т.е. данные передаются от компонентов к их детям. Это достигается с помощью передачи реквизита.

Чтобы разделить значение между несколькими представлениями, вам нужно будет либо хранить данные на общем родительском компоненте, либо передавать его в виде prop ИЛИ хранить в отдельном объекте, который отвечает за управление данными. В ReactJS это достигается с помощью таких шаблонов, как Flux, но я не уверен в возможностях для native-native.

Ответ 2

Глобальная область действия React Native является переменной глобальной.

global.foo = foo

Затем вы можете использовать global.foo где угодно.

Но не злоупотребляйте им! На мой взгляд, глобальная область может использоваться для хранения глобальной конфигурации или чего-то подобного. Совместно использующие переменные между разными представлениями, в качестве вашего описания вы можете выбрать множество других решений (использовать сокращение, поток или хранить их в более высоком компоненте), глобальная область не является хорошим выбором.

Хорошей практикой определения глобальной переменной является использование файла js. Например global.js:

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

Затем, чтобы убедиться, что он выполняется при инициализации проекта. Например, импортируйте файл в index.js:

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

Теперь вы можете использовать глобальную переменную где угодно и не нужно импортировать global.js в каждый файл. Старайтесь не изменять их!

Ответ 3

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

В main.js, например:

export class AppColors {
    static colors = {main_color: "#FFEB3B", secondary_color: "#FFC107"}
}

В другом файле, где нужно получить эти цвета

import { AppColors } from './main.js';

class AnotherPage {
    constructor() {
        super();
        console.log(AppColors.colors); // youla! You will see your main and secondary colors :)
    }
}

Ответ 4

Вы можете сохранить эти значения в состоянии родительских компонентов. Затем передайте методы, изменяющие эти значения через реквизиты или контекст/или как @Jakemmarsh - используйте Flux/подход Redux.

ИЛИ, вы можете использовать AsyncStorage. Он полезен для хранения данных приложения, таких как токены и т.д.