如何在 react-native-router-flux 中合并选项卡和导航栏?
How to combine tabs and navbar in react-native-router-flux?
我想为我的应用程序设置屏幕创建下一个结构 header:
|<- Settings |
|-----------------|
| Tab 1 | Tab 2 |
|-----------------|
| |
| Active tab |
| content |
| |
| |
我试过这样做:
<Provider store={store}>
<RouterWithRedux>
<Scene key="root">
<Scene key="landing" component={Landing} title="Landing" initial={true} />
<Scene tabs key="rootTabBar" back wrap={false} title="Settings">
<Scene key="home" component={Home} title="Home" icon={TabIcon} initial />
<Scene key="search" component={Search} title="Search" icon={TabIcon} />
</Scene>
</Scene>
</RouterWithRedux>
</Provider>
但我得到的不是我所期望的,on attached screen is wrong tabs names
这段代码对我有用
<Scene key="root" hideNavBar headerStyle={{ marginTop:STATUSBAR_HEIGHT, elevation:0}} >
<Scene key="main" hideNavBar >
<Scene key="newsList"
tabs={true}
hideNavBar={false}
headerMode='none'
navBar={Header}
wrap={false}
>
<Scene key="TehcList" component={TehcList} title="Teknoloji" />
<Scene key="GameList" component={GameList} title="Oyun" />
</Scene>
</Scene>
</Scene>
试试这个。
import {Router, Scene} from 'react-native-router-flux';
import Home from './screens/Home';
import Post from './screens/Post';
import Forum from './screens/Forum';
const Routes = () => (
<Router>
<Scene key = "root">
<Scene key = "main"
tabs={true}
hideNavBar={true}
tabBarStyle={styles.navigationTabBar}
hideBackImage={true}>
<Scene key = "home" component = {Home} title = "Home" initial={true} hideNavBar = {true}/>
<Scene key = "post" component = {Post} title = "Post" hideNavBar = {true} />
<Scene key = "forum" component = {Forum} title = "Forum" hideNavBar = {true} />
</Scene>
</Scene>
</Router>
)
export default Routes
从 http://pythonic.ninja/how-to-navigate-to-nested-tab-using-react-native-router-flux.html`
获得线索
我想为我的应用程序设置屏幕创建下一个结构 header:
|<- Settings |
|-----------------|
| Tab 1 | Tab 2 |
|-----------------|
| |
| Active tab |
| content |
| |
| |
我试过这样做:
<Provider store={store}>
<RouterWithRedux>
<Scene key="root">
<Scene key="landing" component={Landing} title="Landing" initial={true} />
<Scene tabs key="rootTabBar" back wrap={false} title="Settings">
<Scene key="home" component={Home} title="Home" icon={TabIcon} initial />
<Scene key="search" component={Search} title="Search" icon={TabIcon} />
</Scene>
</Scene>
</RouterWithRedux>
</Provider>
但我得到的不是我所期望的,on attached screen is wrong tabs names
这段代码对我有用
<Scene key="root" hideNavBar headerStyle={{ marginTop:STATUSBAR_HEIGHT, elevation:0}} >
<Scene key="main" hideNavBar >
<Scene key="newsList"
tabs={true}
hideNavBar={false}
headerMode='none'
navBar={Header}
wrap={false}
>
<Scene key="TehcList" component={TehcList} title="Teknoloji" />
<Scene key="GameList" component={GameList} title="Oyun" />
</Scene>
</Scene>
</Scene>
试试这个。
import {Router, Scene} from 'react-native-router-flux';
import Home from './screens/Home';
import Post from './screens/Post';
import Forum from './screens/Forum';
const Routes = () => (
<Router>
<Scene key = "root">
<Scene key = "main"
tabs={true}
hideNavBar={true}
tabBarStyle={styles.navigationTabBar}
hideBackImage={true}>
<Scene key = "home" component = {Home} title = "Home" initial={true} hideNavBar = {true}/>
<Scene key = "post" component = {Post} title = "Post" hideNavBar = {true} />
<Scene key = "forum" component = {Forum} title = "Forum" hideNavBar = {true} />
</Scene>
</Scene>
</Router>
)
export default Routes
从 http://pythonic.ninja/how-to-navigate-to-nested-tab-using-react-native-router-flux.html`
获得线索