react native expo how to make nested tab

问题

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.

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

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,
});

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

<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>

回答1:

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

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>
        );
    }
}

this is detail link about native-base Tabs

来源：https://stackoverflow.com/questions/55888800/react-native-expo-how-to-make-nested-tab

标签

react-native

expo