更改标签栏背景颜色会导致所有屏幕重新呈现

Question

我正在使用 react-navigation 作为我的导航解决方案。我需要通过单击 settings 屏幕中的按钮来更改选项卡栏的背景颜色，但是，这样做会使所有屏幕重新呈现，这是正在发生的事情的现场演示：

如您所见，每次我在 Settings 屏幕中按下 Change Tab Bar Background Color 按钮时，标签栏的颜色都会发生变化，但与此同时，应用程序会自动导航到 Login 屏幕出于某种原因。我正在使用 redux 来维护当前的主题，这里是代码：

动作创作者：

export function switchTheme() {
    return { type: 'SWITCH_THEME' };
}

减速器：

const INITIAL_STATE = {
    backgroundColor: 'white'
};

export default function (state = INITIAL_STATE, action) {
    switch (action.type) {
        case 'SWITCH_THEME':
            return { backgroundColor: state.backgroundColor === 'white' ? 'black' : 'white'  };
        default:
            return state;
    }
}

设置屏幕：

import React, { Component } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Icon } from 'react-native-elements';
import { connect } from 'react-redux';

import { switchTheme } from '../actions';

class SettingsScreen extends Component {
    static navigationOptions = {
        title: 'Settings',
        header: null,
        tabBarIcon: ({ tintColor }) => {
            return (<Icon name='settings' size={30} color={tintColor} />);
        }
    };

    render() {
        return (
            <View style={{ ... }}>
                <TouchableOpacity
                    onPress={this.props.switchTheme}
                    style={{ ... }}
                >
                    <Text style={{ ... }}>
                        Change Tab Bar Background Color
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

export default connect(null, { switchTheme })(SettingsScreen);

Main.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { TabNavigator } from 'react-navigation';

import WelcomeScreen from './screens/WelcomeScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import SettingsScreen from './screens/SettingsScreen';
import MessageScreen from './screens/MessageScreen';

class Main extends Component {
    render() {
        const MainTabNavigator = TabNavigator({
            login: { screen: LoginScreen },
            register: { screen: RegisterScreen },
            message: { screen: MessageScreen },
            setting: { screen: SettingsScreen }
        }, {
            tabBarOptions: {
                style: { backgroundColor: this.props.backgroundColor }
            }
        });

        return (
            <MainTabNavigator />
        );
    }
}

const mapStateToProps = state => {
    const { backgroundColor } = state.theme;
    return { backgroundColor };
};

export default connect(mapStateToProps, null)(Main);

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';

import store from './store';

import Main from './Main';

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Main />
            </Provider>
        );
    }
}

export default App;

为什么应用会导航到 Login 屏幕，我该怎么做才能防止这种情况发生？

Answer 1

reducer 中的 backgroundcolor 状态块被改变 SWITCH_THEME 所以我认为当谈到 main.js 并从 state.theme 中拉出 backgroundColor 时，道具 backgroundColor 得到更新并重新呈现

更改标签栏背景颜色会导致所有屏幕重新呈现

Changing tab bar background color causes all screens to re-render

react-native

redux

react-redux

react-navigation