Управление глобальными переменными состояния в React Native

Question

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

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

Экран 1: https://i.stack.imgur.com/R6TNm.png

Экран 2: https://i.stack.imgur.com/o21rh.png

Экран 3: https://i.stack.imgur.com/argoi.png

Мой главный вопрос: Если кто-то нажмет кнопку Weapon1 на Screen2, он вызовет функцию weaponOne (), определенную в моем файле Game. js. Он должен обновить текущее состояние моей глобальной переменной состояния врага-бара до врага-бара = врага-бара - 0.1 и соответственно обновить пользовательский интерфейс на экранах 1 и 2. Аналогичным образом, если пользователь нажимает QuickFix на экране 3, он вызовет quickFix () и изменит переменную состояния от hpBar до hpBar = hpBar + 0.1 и обновите пользовательский интерфейс для экранов 1 и 3. Как мне go управлять этими глобальными переменными состояния?

Заранее спасибо за помощь.

Ссылка на глобальное состояние: Глобальное состояние в React Native

Global. js

module.exports = {
    screen1: null
};

Игра. js

import React from 'react';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import * as Progress from 'react-native-progress';
import GLOBAL from '../../state/Global'

import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Button

} from 'react-native';

import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';

//GLOBAL.screen1 = this;

GLOBAL.screen1 = {
    hpBar: 0.65,
    enemyBar: 0.87
}




class CaptainScreen extends React.Component {

    /* constructor() {
         super();
         this.state = {
             hpBar: 1,
             enemyBar: 1,
         }
     } */


    render() {

        return (
            <View style={styles.container}>

                <Text style={styles.title}>Captain Screen</Text>

                <View style={styles.container2} >
                    <Progress.Bar progress={GLOBAL.screen1.hpBar} width={200} animated={true} borderColor={'black'} />
                    <Text style={styles.text}>Your HP: {GLOBAL.screen1.hpBar * 100}%</Text>
                    <Progress.Bar progress={GLOBAL.screen1.enemyBar} width={200} color={'red'} animated={true} borderColor={'black'} />
                    <Text style={styles.text}>Enemy HP: {GLOBAL.screen1.enemyBar * 100}%</Text>
                </View>

            </View>
        )
    }
}


class WeaponsScreen extends React.Component {

    weaponOne = () => {


        this.setState({ enemyBar: 1.0 - 0.1 })
    }

    render() {
        //GLOBAL.screen1 = this;

        return (
            <View style={styles.container}>
                <Text style={styles.title}>Weapons Screen</Text>

                <View style={styles.container2} >

                    <Progress.Bar progress={GLOBAL.screen1.enemyBar} width={200} color={'red'} animated={true} borderColor={'black'} />
                    <Text style={styles.text}>Enemy HP: {GLOBAL.screen1.enemyBar * 100}%</Text>
                    <Button title="Weapon 1" onPress={() => this.weaponOne()}> </Button>
                    <Button title="Weapon 2"> </Button>
                    <Button title="Weapon 3"> </Button>

                </View>
            </View>
        )
    }

}



class EngineersScreen extends React.Component {
    quickFix = () => {

        this.setState({ hpBar: hpBar + 0.1 })
    }

    render() {

        return (
            <View style={styles.container}>
                <Text style={styles.title}>Engineer Screen</Text>

                <View style={styles.container2} >

                    <Progress.Bar progress={GLOBAL.screen1.hpBar} width={200} animated={true} borderColor={'black'} />
                    <Text style={styles.text}>Your HP: {GLOBAL.screen1.hpBar * 100}%</Text>

                    <Button title="Quick Fix" onPress={() => this.quickFix()}> </Button>
                    <Button title="Medium Fix"> </Button>
                    <Button title="Indepth Fix"> </Button>
                </View>
            </View>
        )
    }
}

Answer 1

В любом случае обработка глобального состояния не отличается от обычных приложений. Вы можете использовать Redux или RxJs или MobX самостоятельно.

Я предпочитаю использовать Context API и hooks для обработки состояний в моем простом приложении.

Или вы можете просто сделать модуль для обработки состояний.

State.ts

export let hp: number = 1

Consumer.ts

import { hp } from 'State';

console.log(hp); // 1
hp = 2;
console.log(hp); // 2