React Native Router Flux 选项卡导航不显示特定组件的选项卡图标

Posted 2023-02-22

【中文标题】React Native Router Flux 选项卡导航不显示特定组件的选项卡图标

【英文标题】：React Native Router Flux Tab Navigation does not show Tab Icon for one specific component

【发布时间】：2018-08-26 15:18:35

【问题描述】：

我遇到了反应原生路由器通量导航的问题。我想使用 react-native-vector-icons 为我的标签显示一个图标，但对于组件 ScreenOverview 它不显示图标。

代码：

const Scenes = Actions.create(
<Router>
    <Scene key='root' hideNavBar>

        <Scene
            key='amount'
            component=ScreenAmountPlayer
            title='AmountOfPlayer'
            initial
        />

        <Scene
            key='names'
            component=ScreenEnterPlayerNames
            title='EnterNames'
            hideNavBar
        />

        <Scene
            key='playScreen'
            hideNavBar
            tabs=true
        >

            <Scene
                key='Play!'
                component=PlayScreen
                icon=TabIcon
                iconName='play-circle-o'
                hideNavBar
            />

            <Scene
                key='Overview'
                iconName='list-ul'
                icon=TabIcon
                component=ScreenOverview
                hideNavBar
            />

        </Scene>

    </Scene>
</Router>
) 

使用这段代码，它看起来像这样：

当我将第二个场景更改为：

<Scene
    key='Overview'
    iconName='list-ul'
    icon=TabIcon
    component=PlayScreen
    hideNavBar
/>

看起来像这样：

【参考方案1】：

我只是简单地将我的场景包裹在另一个场景中，它起作用了

        <Scene
            key='playScreen'
            hideNavBar
            tabs=true
        >
            <Scene key='PlayWrapper' icon=TabIcon iconName='play-circle-o' hideNavBar tabBarLabel='Play!'>
                <Scene
                    key='Play!'
                    component=PlayScreen
                    hideNavBar
                />
            </Scene>

            <Scene key='OverviewWrapper' iconName='list-ul' icon=TabIcon hideNavBar tabBarLabel='Overview'>
                <Scene
                    key='Overview'
                    component=ScreenOverview
                    hideNavBar
                />
            </Scene>
        </Scene>