Question

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

您如何处理像这样的嵌套标签，添加jobby和job标签并使之起作用？

当前的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

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>

Answer 1

您可以使用“ tabs”的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>
        );
    }
}

这是detail link关于native-base Tabs

反应本地博览会如何使嵌套选项卡

1 个答案: