我正在尝试在我的应用中设置顶部菜单和选项卡菜单。底部的选项卡可以使用,但顶部的菜单不显示。我要设置的最上面的菜单是我们单击的菜单,然后显示左侧菜单选项。
class App extends Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</Provider>
);
}
}
export default App;
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
const MainStackNavigator = createStackNavigator({
Home: {
screen: TabNavigator
}
});
const AppDrawerNavigator = createDrawerNavigator({
Home:{
screen: MainStackNavigator
}
});
const AppSwitchNavigator = createSwitchNavigator({
Login: { screen: Login },
Main: { screen: AppDrawerNavigator }
});
const AppContainer = createAppContainer(AppSwitchNavigator);
我是React Native的新手,所以我不确定设置导航器选项的顺序。我在做什么错了?
谢谢
答案 0 :(得分:1)
我已经用一个包含MainDrawerNavigator
的{{1}}来举例说明。标签导航器包含三个堆栈导航器,为此,我仅引用MainTabNavigator
,它是一个堆栈导航器。默认情况下,这将在我的“主页”选项卡中显示一个堆栈标题,但不会显示用于打开抽屉的抽屉图标。为此,您需要放入一个图标来切换抽屉。我通过访问专门显示的HomeScreenNavigator
中的navigationOptions
来显示此内容:
HomeScreen
以上内容将在 static navigationOptions = (navData) => {
return {
headerLeft: (
<View style={styles.headerButtonLeft}>
<HeaderButtons HeaderButtonComponent={DefaultHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => {
navData.navigation.toggleDrawer()
}} />
</HeaderButtons>
</View>
),
}
}
的左侧设置一个标题按钮,按下HomeScreen
将触发通过Item
切换打开的抽屉。您的示例将与之类似,只是最外层的导航器将是您的开关导航器。
完整代码如下所示:(让我知道是否需要在其他地方进行说明)。
主屏幕示例:
navData.navigation.toggleDrawer()
HomeScreenNavigator示例:
class HomeScreen extends React.Component {
constructor(props) {
super(props)
this.state = { ... }
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
static navigationOptions = (navData) => {
return {
headerLeft: (
<View style={styles.headerButtonLeft}>
<HeaderButtons HeaderButtonComponent={DefaultHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => {
navData.navigation.toggleDrawer()
}} />
</HeaderButtons>
</View>
),
}
}
}
MainTabNavigator示例:
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../screens/HomeScreen';
import MediaSelectScreen from '../screens/MediaSelectScreen';
import FinalizePostScreen from '../screens/FinalizePostScreen';
import { userInterface } from '../constants/Colors';
import Styles from '../constants/Styles';
const HomeScreenNavigator = createStackNavigator({
Home: HomeScreen,
MediaSelect: MediaSelectScreen,
FinalizePost: FinalizePostScreen
}, {
defaultNavigationOptions: {
headerStyle: {
backgroundColor: userInterface.accentColor,
height: Styles.HEADER_HEIGHT,
},
}
});
export default HomeScreenNavigator;
MainDrawerNavigator示例:
import { createBottomTabNavigator } from 'react-navigation-tabs';
import MessagesScreen from '../screens/MessagesScreen';
import HomeScreenNavigator from './HomeScreenNavigator';
import LearnScreenNavigator from './LearnScreenNavigator';
const MainTabNavigator = createBottomTabNavigator({
LearnScreen: { screen: LearnScreenNavigator, navigationOptions: () => ({
tabBarLabel: 'Learn'
})},
HomeScreen: { screen: HomeScreenNavigator, navigationOptions: {
tabBarLabel: 'Home'
}},
MessagesScreen: { screen: MessagesScreen, navigationOptions: {
tabBarLabel: 'Messages'
}},
});
export default MainTabNavigator;
App.js示例:
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
const MainDrawerNavigator = createDrawerNavigator({
DrawerNav: MainTabNavigator
}, {
drawerType: 'slide'
});
export default createAppContainer(MainDrawerNavigator);