我是反应原生和反应导航的新手 . 必需屏幕:带有 Headers (缩略图 Headers )的主页,两个选项卡和一个抽屉,用于切换缩略图的onPress .
请检查我的代码:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity} from 'react-native';
import {Icon, Button} from 'native-base';
const util = require('util');
import { TabNavigator, StackNavigator, DrawerNavigator, NavigationActions } from 'react-navigation';
import FirstScreen from './tabs/FirstScreen';
import SecondScreen from './tabs/SecondScreen';
import Profile from './Profile';
import SearchScreen from './tabs/SearchScreen';
const DrawerScreens = DrawerNavigator({
Profile: {screen: Profile}
},{
drawerPosition: 'left',
drawerWidth: 150
});
// A drawer navigator
const TabScreens= TabNavigator({
First: {screen: FirstScreen},
Second: {screen: SecondScreen}
});
// Started with a tab navigator to register two tabs
const MenuButton =({navigation})=>{
return(
<View>
<TouchableOpacity onPress={()=>(navigation.navigate('DrawerToggle'))}>
<Icon name="person" size= {20}/>
</TouchableOpacity>
</View>)};
export const StackScreens= StackNavigator({
Draw: {screen: DrawerScreens},
// Drawer navigator as a screen
Display: {screen: TabScreens,
// Making the tabnavigator as a screen
navigationOptions: ({navigation})=>({
title: 'Welcome',
headerLeft: <MenuButton navigation={navigation} />
})
},
},{
initialRouteName: 'Display'
});
按下缩略图时,TabScreens导航到DrawerScreens(因为这是我编码的方式) . 我想让它切换 . 有人可以帮帮我吗 .
1 回答
以下是关于how to structure your navigator properly.的一些一般性想法
您使用的是什么
react-navigation
版本?尝试将
MenuButton
辅助方法更改为此方法,看看它是否有帮助