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

【问题标题】：React Native Router Flux Tab Navigation does not show Tab Icon for one specific componentReact Native Router Flux 选项卡导航不显示特定组件的选项卡图标
【发布时间】：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
/>

看起来像这样：

【问题讨论】：

标签： android react-native tabs flux vector-icons

【解决方案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>

【讨论】：