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

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 SWITCH_THEME 中改变 所以我认为当涉及到 main.js 并从 state.theme 中拉出背景颜色时，道具背景颜色会更新并重新渲染