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

Question

In React Native Я хочу использовать глобальные переменные, когда я перемещаюсь между разными экранами

Может ли кто-нибудь помочь мне, как этого достичь?

Answer 1

Способ, которым вы должны это делать в React Native (как я понимаю), заключается в том, чтобы сохранить вашу глобальную переменную в вашем 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 2

Настройка потока контейнера

простой пример

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 3

Глобальная область действия 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 в каждом файле. Не пытайтесь модифицировать их! // Под ред орфографической ошибки

Answer 4

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

Answer 5

Вы можете рассмотреть возможность использования функции React's 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 «обласкана» на поддерево (это означает, что вы можете определить различные области для разных поддеревьев).

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