Я не смог найти ничего подобного
$rootScope
для React Native, и я хочу разделить пару переменных между разными представлениями.
Я не смог найти ничего подобного
$rootScope
для React Native, и я хочу разделить пару переменных между разными представлениями.
Сохранение переменных в глобальной области - это немного анти-шаблон в React. Реакт предназначен для использования с односторонним потоком данных, т.е. данные передаются от компонентов к их детям. Это достигается с помощью передачи реквизита.
Чтобы разделить значение между несколькими представлениями, вам нужно будет либо хранить данные на общем родительском компоненте, либо передавать его в виде prop
ИЛИ хранить в отдельном объекте, который отвечает за управление данными. В ReactJS это достигается с помощью таких шаблонов, как Flux, но я не уверен в возможностях для native-native.
Глобальная область действия 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 в каждый файл. Старайтесь не изменять их!
Например, вы можете экспортировать класс со статическими свойствами, а затем импортировать там, когда это необходимо.
В 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 :)
}
}
Вы можете сохранить эти значения в состоянии родительских компонентов. Затем передайте методы, изменяющие эти значения через реквизиты или контекст/или как @Jakemmarsh - используйте Flux/подход Redux.
ИЛИ, вы можете использовать AsyncStorage. Он полезен для хранения данных приложения, таких как токены и т.д.