在Tab Navigator屏幕中，Reducer状态变量返回未定义状态

Question

我有三个底部导航选项卡（机长，武器，工程师）。队长选项卡显示当前生命值和敌人生命值。武器选项卡显示敌人的HP和3个按钮。 “工程师”选项卡显示“当前HP”和3个按钮。

我试图通过使用React Redux和reducer显示所有这些状态变量来显示所有这些HP值。但是，当渲染各种屏幕时。它们都为状态变量返回NaN。

与返回不同标签的NaN / undefined不同，我们该如何返回默认状态变量？

这是我的主屏幕，其中包含所有这些标签导航屏幕： Game.js

import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import * as Progress from 'react-native-progress';
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import reducer from '../../src/store/reducer'

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

} from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';


const store = createStore(reducer);

class CaptainScreen extends React.Component {

    render() {
        console.log(this.props.hpBar);
        console.log(this.props.enemyBar)

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

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

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

            </View>
        )



    }
}


class WeaponsScreen extends React.Component {

    render() {
        const { navigate } = this.props.navigation;

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

                <View style={styles.container2} >

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

}

class EngineersScreen extends React.Component {

    render() {

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

                <View style={styles.container2} >

                    <Progress.Bar progress={this.props.hpBar} width={200} animated={true} borderColor={'black'} />
                    <Text style={styles.text}>Your HP: {(this.props.hpBar * 100).toFixed(0)}%</Text>

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

const TabNavigator = createMaterialBottomTabNavigator(
    {
        Captain: {
            screen: CaptainScreen,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon name="ship-wheel" style={[{ color: tintColor }]} size={25} />
                    </View>
                ),
            }
        },
        Weapons: {
            screen: WeaponsScreen,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon name="pistol" style={[{ color: tintColor }]} size={25} />
                    </View>
                ),
                activeColor: '#ffffff',
                inactiveColor: '#a3c2fa',
                barStyle: { backgroundColor: '#2163f6' },
            }
        },
        Engineer: {
            screen: EngineersScreen,
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => (
                    <View>
                        <Icon name="hammer" style={[{ color: tintColor }]} size={25} />
                    </View>
                ),
                activeColor: '#ffffff',
                inactiveColor: '#92c5c2',
                barStyle: { backgroundColor: '#2c6d6a' },
            }
        },
    },
    {
        initialRouteName: 'Captain',
        activeColor: '#ffffff',
        inactiveColor: '#bda1f7',
        barStyle: { backgroundColor: '#6948f4' },
    }
);

const mapStateToProps = (state) => {
    console.log(state);
    return {
        hpBar: state.hpBar,
        enemyBar: state.enemyBar
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onEngineer: () => dispatch({ type: 'HP_UP', payload: 0.1 }),
        onWeapon: () => dispatch({ type: 'HP_DOWN', payload: 0.1 })


    }
}

const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(TabNavigator);

const Game = createAppContainer(ConnectedApp);


export default Root = () => {
    return (<Provider store={store}><Game /></Provider>)
}

这是我的减速器文件： Reducer.js

const initialState = {
    hpBar: 1.0,
    enemyBar: 1.0,


};

const reducer = (state = initialState, action) => {
    const newState = { ...state };

    switch (action.type) {
        case 'HP_UP':
            return {
                ...state,
                hpBar: state.hpBar + action.payload
            }
            break;

        case 'HP_DOWN':

            return {
                ...state,
                enemyBar: state.enemyBar - action.payload,

            }
            break;

    }


    return newState;
};

export default reducer;