Question

我在react-native-router-flux中有一个Scene，它在我的应用程序中充当TabBar，但是我们需要根据应用程序内部的某些状态更改整个标签栏的颜色方案。我们正在使用redux进行状态管理，并且我曾尝试调整tabBarStyle组件中的<Scene>属性，但对样式进行更改没有任何影响。 TabBar似乎只在组件安装时才会呈现，并且似乎并不关心传递给它的任何道具是否被更改。

我们正在尝试在我们的应用程序中实现不同的主题，这一直很有效，直到我们使用react-native-router-flux所使用的组件。

是否有人知道如何让这些组件实时更新其样式？

Answer 1

你应该在场景中使用＆＃34;样式＆＃34; -Property。这就是我用白色图标和白色字体做黑色TabBar的方法：

            <Scene key='mainScenes'
                hideNavBar={false}
                navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                leftButtonIconStyle = {{ tintColor:'white'}}
                titleStyle={{color: 'white', fontSize: normalize(14), fontWeight: 'bold'}}
                tabs={true}
                translucent={false}
                style={s.tabbar}
            >
                <Scene icon={TabIcon} key='events' hideNavBar={false} title='Events' titleStyle={{color:'white'}}
                    navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                    component={EventsViewScene} sceneStyle={getScreenContainerStyle()} >

                </Scene>
                <Scene icon={TabIcon} key='locations' hideNavBar={false} title='Locations' titleStyle={{color:'white'}}
                    navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                    component={LocationsViewScene} sceneStyle={getScreenContainerStyle()}
                />
                <Scene icon={TabIcon} key='search' hideNavBar={false} title='Search' titleStyle={{color:'white'}}
                    navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                    component={SearchViewScene} sceneStyle={getScreenContainerStyle()}
                    initial={false}
                />
                <Scene icon={TabIcon} key='more' hideNavBar={false} title='More' titleStyle={{color:'white'}}
                    navigationBarStyle={{ backgroundColor: COLORS.HEADER_BACKGROUND}}
                    component={InfoViewScene} sceneStyle={getScreenContainerStyle()}
                    initial={false}
                />
            </Scene>

样式表：

const s = StyleSheet.create({
    tabIcon: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    rightButton: {
        justifyContent: 'center',
        alignItems: 'center',
        width: normalize(23),
        height: normalize(23),
    },
    tabbar: {
        backgroundColor: 'black',
        borderTopColor: 'white',
        borderTopWidth: 2,
    },

<强> TabIcon：

const icons = {
    'search': 'search',
    'events': 'calendar',
    'locations': 'map-marker',
    'more': 'info-circle'
}

// Application
class TabIcon extends React.Component {

    render(){
        const {name, title} = this.props;
        const iconName = icons[name] || 'info-circle'

        return (
            <View style={s.tabIcon}>
                <Icon name={iconName} size={TAB_ICON_SIZE} color="white" />
                <Text style={{color: this.props.selected ? 'yellow' :'white'}}>{title}</Text>
            </View>
        );
    }
}

react-native-router-flux TabBar上的动态样式

1 个答案: