Router Flux - 如何禁用选项卡栏上的自动文本？

Question

这是结果。我想自己渲染文本和图标。所以我需要禁用选项卡的自动生成文本。有什么建议吗？

此外，文本颜色在激活时不会变为红色（TabIcon 函数）。

import React from 'react'
import {Text} from 'react-native'
import {Router, Scene,Stack, Modal} from 'react-native-router-flux'

// Scenes
import BrowseUser from '../scenes/BrowseUser'
import Notifications from '../scenes/Notifications'
import Search from '../scenes/Search'
import Timeline from '../scenes/Timeline'

const TabIcon = ({selected,title}) => {
  return(<Text style={{color: selected ? 'red ' : 'black'}}>{title} 
</Text>)
}

export default props => (
<Router>
    <Stack key="root" hideNavBar>
        <Scene key='main' icon={TabIcon} tabs={true} initial tabBarStyle={{backgroundColor: '#00FF00'}}>
            <Scene key='timeline' component={Timeline} title='Timeline'/>
            <Scene key='browseUser' component={BrowseUser} title='BrowseUser'/>
            <Scene key='search' component={Search} title='Search'/>
            <Scene key='notifications' component={Notifications} title='Notifications'/>
        </Scene>
    </Stack>
</Router>
)

Answer 1

关于

So I need to disable the automatic generated text for the tabs. Any suggestion ?

组件网支持属性showLabel所以你可以将它设置为falseshowLabel={false}并且不会显示标签场景的标题。

关于

Also, the text color is not changing to red when it's active (TabIcon function).

选择时传递的 prop 是 focused 而不是 "selected"。所以应该是

const TabIcon = ({ focused,title }) => 
  (<Text style={{color: focused ? 'red ' : 'black'}}>{title}</Text>)

Router Flux - 如何禁用选项卡栏上的自动文本？

Router Flux - how to disable automatic text on the tab bar?

react-native

react-native-router-flux