反应本地博览会如何使嵌套选项卡 [英] react native expo how to make nested tab

问题描述

我正在使用react-navigation来制作底部的标签.现在，我想在底部导航之一中添加爱好和工作"选项卡.照片中的东西.

I'm using react-navigation to make the bottom tab. Now I want to add the hobby and job tab inside one of the bottom nav. Something like in the photo.

您如何处理像这样的嵌套选项卡，添加jobby和job选项卡并使之起作用?

How do you do nested tab like this add the jobby and job tab and make it work?

当前的mainTabnavigator.js

This current mainTabnavigator.js

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Links',

};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

和AppNavigator.js

And AppNavigator.js

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(createSwitchNavigator({
  // You could add another route here for authentication.
  // Read more at https://reactnavigation.org/docs/en/auth-flow.html
  Main: MainTabNavigator,
}));

App.js

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppNavigator />
        </View>
      );
    }
  }
}

linkScreen.js

linkScreen.js

<ScrollView style={styles.container} contentContainerStyle={styles.con}>
                <View style={styles.box}>
                    <View style={styles.tab}>
                        <Text onPress={this.gotoHobby}>Hobby</Text>
                    </View>
                    <View style={styles.tab}>
                        <Text onPress={this.gotoJob}>Job</Text>
                    </View>
                </View>
            </ScrollView>

推荐答案

您可以使用'native-base'的tabs函数.

You can use tabs function of 'native-base'.

example.js

example.js

import React, { Component } from 'react';
import { Container, Content, Tabs } from 'native-base';

import TabOne from './tabOne';
import TabTwo from './tabTwo';
​
export default class ThemeTabsExample extends Component {
    render() {
        return (
            <Container>
                <Content>
                    <Tabs>
                        <TabOne tabLabel='One' />
                        <TabTwo tabLabel='Two' />
                    </Tabs>
                </Content>
            </Container>
        );
    }
}

这是关于native-base Tabs

这篇关于反应本地博览会如何使嵌套选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！