react-native-router-flux选项卡如何更改所选选项卡的图标？-Java 学习之路

我正在使用react-native-router-flux ^ 4.0.0-beta.21和react-native-vector-icons的导航标签 . 选择场景后，如何更改图标或更改所选场景图标的颜色？

<Scene
        key='navigationTab'
        tabs
        tabBarStyle={styles.tabBarStyle}
        showLabel={false}
>
        <Scene
                key='home'
                hideNavBar
                icon={SimpleLineIcon}
                name='home'
                size={25}
                component={PostList}
                initial
        />
        <Scene
                key='profile'
                hideNavBar
                icon={FontAwesomeIcon}
                name='user-o'
                size={25}
                component={Register}
        />
</Scene>

现在我已经定义了一个像下面这样的图标，但是我如何传递像焦点道具一样的东西？

const iconBack = () => (
        <TouchableHightLight onPress={console.log('home')} >
                <MaterialIcon
                        name='keyboard-arrow-left'
                        size={28}
                />
        </TouchableHightLight>
);

3 回答

const SimpleLineIcon= ({ selected, title }) => {
    let image;

    switch (title) {
        case 'firstTab':
            image = require('firstTabSelected.gif') : require('firstTab.gif');
            break;

        case 'secondTab':
            image = require('secondTabSelected.gif') : require('secondTab.gif');
            break;
    }

    return ( <Image source={image} /> );
}

回复于 2024-04-27T05:43:31+08:00

您可以接收 focused 作为图标渲染功能的参数，然后检查当前图标是否已聚焦 .

例如：

const SimpleLineIcon= ({ title, focused }) => {
    let image;

    switch (title) {
        case 'firstTab':
            image = focused ? require('firstTabSelected.gif') : require('firstTab.gif');
            break;

        case 'secondTab':
            image = focused ? require('secondTabSelected.gif') : require('secondTab.gif');
            break;
    }

    return ( <Image source={image} /> );
}

回复于 2024-04-27T05:43:31+08:00

我正在使用常量来调用我的tabIcons

import Icon from 'react-native-vector-icons/FontAwesome'

const iconProfile = () => (
    <Icon color='#f53d3d' name='user-o' size={25} />
)

...

<Scene
   key='profile'
   hideNavBar
   icon={iconProfile}
   name='profile'
   component={Register}
/>

回复于 2024-04-27T05:43:31+08:00

react-native-router-flux选项卡如何更改所选选项卡的图标？

3 回答

相关问题