Question

所以我使用React-native react-navigation，我试图设置我的应用程序以获得一些流量。

我的想法是嵌套一个抽屉，我可以在我的标签导航器的标题内打开和关闭它。或者同时使用tabBar顶部和底部，我不确定是否可能。

这是我的Navigator.js

const RootDrawer = DrawerNavigator({
  Leaderboard: {
    screen: Leaderboard,
    navigationOptions: {
      drawerLabel: 'Leaderboard',
      drawerIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-ribbon' : 'ios-ribbon-outline'}
          size={20}
          style={{ color: tintColor }}
        />
      ),
    },
  },
  Achievements: {
    screen: Leaderboard,
    navigationOptions: {
      drawerLabel: 'Achievements',
      drawerIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-trophy' : 'ios-trophy-outline'}
          size={20}
          style={{ color: tintColor }}
        />
      ),
    },
  }
});

// this was if i was going to use top and bottom tabs for experimentation
const TopTabs = TabNavigator(
  {
    Home: { 
      screen: Landing,
      navigationOptions: {
        title: 'Test',
      }
    },
    Settings: { 
      screen: RootDrawer,
      navigationOptions: ({ navigation }) => ({
        headerLeft : <MenuButton navigation={navigation} />
        // headerLeft : <MenuButton navigate={navigation.navigate} />
      })
    },
  },
  {
    navigationOptions: ({ navigation }) => ({
      headerTitleStyle: {
        alignSelf: 'center',
        textAlign: 'center',
      },
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch(routeName) {
          case 'Home':
            iconName = 'home';
            break;
          case 'Profile':
            iconName = 'account';
            break;
          case 'Run':
            iconName = 'run';
            break;
          case 'Settings':
            iconName = 'settings';
            break;
        }
        return <MCIcons name={iconName} size={25} color={tintColor} />;
      }
      ,
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'top',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

const BottomTabs = TabNavigator({
    Home: { 
      screen: Landing,
      navigationOptions: {
        title: 'Test',
      }
    },
    Run: { 
      screen: Landing,
      navigationOptions: {
        title: 'Let\'s Run'
      } 
    },
    Profile: { screen: Profile }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        switch(routeName) {
          case 'Home':
            iconName = 'home';
            break;
          case 'Profile':
            iconName = 'account';
            break;
          case 'Run':
            iconName = 'run';
            break;
          case 'Settings':
            iconName = 'settings';
            break;
        }

        return <MCIcons name={iconName} size={25} color={tintColor} />;
      }
      ,
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

// Tried to create new item here to create custom header but when I click it it just navigates to the first item in the drawer instead of open / close the drawer
const TabStack = StackNavigator({
  BottomTabs: {
    screen: BottomTabs,
    navigationOptions: ({ navigation }) => ({
      title: "Main",
      headerLeft:(
        <MenuButton navigation={navigation} />
      )
    })
  },
  Drawer: {
    screen: RootDrawer
  }  
});

export const RootNav = StackNavigator({
  WelcomePage: {
    screen: WelcomePage,
    navigationOptions: {
      header: null
    }
  },
  Login: {
    screen: LoginForm,
    navigationOptions: {
      title: 'Login'
    }   
  },
  SignUp: {
    screen: SignUpForm,
    navigationOptions: {
      title: 'Sign Up'
    }
  },
  Tabs: {
    screen: TabStack
  }
});

export default RootNav;

        export default RootNav;

这是我的MenuButton.js

imports ...

export default class MenuButton extends Component {
    press() {
        // this.props.navigate('DrawerToggle');

        // Work around for broken functionality above. Should eventually be fixed
        if (this.props.navigation.state.index === 0) {
            this.props.navigation.navigate('DrawerOpen')
        } else {
            this.props.navigation.navigate('DrawerClose')
        }
    }
    render() {
      return (
        <TouchableOpacity onPress={this.press.bind(this)}>
            <Icon name="bars" style={{color: 'black', padding: 10, marginLeft:10, fontSize: 20}}/>
        </TouchableOpacity>
      );
    }
}

因此，当我在BottomTabs TabNavigation下列出的屏幕上允许我切换DrawerNavigation时，我希望能够在我的标题中有一个MenuButton

Answer 1

你可以改变你的MenuButtom：

imports .....

const MenuButton = ({ navigation }) => (

  <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
    <Icon
      name="bars"
      style....
    />
  </TouchableOpacity>
);

export default MenuButton;

然后在导航器中导入此自定义按钮并创建底部标签和抽屉，如下所示：

const BottomTabs = TabNavigator({

 tabs screens.....

},
{
  tab bar options....

})

现在你的抽屉：

export const Drawer = DrawerNavigator({
  Tabs: {
      screen: BottomTabs,
  }
},
{
  navigationOptions: ({navigation}) => ({
    headerLeft: <MenuButton navigation={navigation} />,
  }),
});

现在你的RootNav

export const RootNav = StackNavigator({
  Dashboard : {
      screen: Drawer,
  },
});
export default RootNav;

我希望这对你有帮助，我也在这里给你一个例子：

Example drawer and tabs

抽屉嵌套在TabNavigator中

1 个答案: