我正在使用 react-native-tab-navigator:
https://github.com/happypancake/react-native-tab-navigator
<TabNavigator style={styles.container}>
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
selectedTitleStyle={{color: "#3496f0"}}
renderIcon={() => <Icon name="home" size={px2dp(22)} color="#666"/>}
renderSelectedIcon={() => <Icon name="home" size={px2dp(22)} color="#3496f0"/>}
onPress={() => this.setState({selectedTab: 'home'})}>
<SideMenu menu={MenuComponent}>
<HomeScreen/>
</SideMenu>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'links'}
title="Links"
selectedTitleStyle={{color: "#3496f0"}}
renderIcon={() => <Icon name="user" size={px2dp(22)} color="#666"/>}
renderSelectedIcon={() => <Icon name="user" size={px2dp(22)} color="#3496f0"/>}
onPress={() => this.setState({selectedTab: 'links'})}>
<SideMenu menu={MenuComponent}>
<LinksScreen/>
</SideMenu>
</TabNavigator.Item>
</TabNavigator>
我的屏幕配置如下:
// app/index.js
import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import HomeScreen from './containers/HomeScreen';
import LinksScreen from './containers/LinksScreen';
import TabNavScreen from './containers/TabNavScreen';
const MyApp = () => {
return (
<Router>
<Scene key="root">
<Scene key="home"
component={HomeScreen}
title="Home"
/>
<Scene
key="links"
component={LinksScreen}
title="Links"
/>
<Scene key="tabNav"
component={TabNavScreen}
title="Home"
initial
/>
</Scene>
</Router>
);
}
export default MyApp;
更改选项卡时需要更改主屏幕的标题。现在它被固定在主页上,我尝试的任何东西似乎都不成功。
在此先感谢您的帮助。