0

我对本机反应和开发一个非常简单的游戏还很陌生。该游戏通过使用底部标签导航由三个不同的标签组成。

这是我用于此游戏的不同选项卡。

屏幕一： https ://i.stack.imgur.com/R6TNm.png

屏幕 2： https ://i.stack.imgur.com/o21rh.png

屏幕 3： https ://i.stack.imgur.com/argoi.png

我的主要问题是：如果有人按下 Screen2 中的 Weapon1 按钮，它将调用在我的 Game.js 文件中定义的 WeaponOne() 函数。它应该将我的全局状态变量enemyBar 的当前状态更新为enemyBar =enemyBar - 0.1 并相应地更新屏幕1 和2 中的UI。同样，如果用户在屏幕3 中按下QuickFix，它将调用quickFix() 并更改状态变量从 hpBar 到 hpBar = hpBar + 0.1 并更新屏幕 1 和 3 的 UI。我将如何操作这些全局状态变量？

在此先感谢您的帮助。

全局状态参考：React Native 中的全局状态

全球.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>
        )
    }
}
4

1 回答 1

0

无论如何，处理全局状态与普通应用程序没有区别。您可以使用ReduxorRxJs或您MobX自己。

我更喜欢在我的简单应用程序中使用Context APIandhooks进行状态处理。

或者您可以只制作一个用于状态处理的模块。

状态.ts

export let hp: number = 1

消费者.ts

import { hp } from 'State';

console.log(hp); // 1
hp = 2;
console.log(hp); // 2
于 2020-04-21T06:31:34.323 回答