在屏幕中显示导航底部栏，而不是 React Native 中的底部选项卡的一部分 [英] showing navigation bottom bar in screens which are not part of bottom tabs in react native

问题描述

我在 React Native 应用中有 3 个标签和 8 个屏幕.我创建了底部选项卡导航器，如下所示，我还有 5 个屏幕，我不想在选项卡中显示这些屏幕，但在这些屏幕上，需要正常的三个选项卡底部栏导航器.确切的帮助表示赞赏.

I have three tabs and 8 screens in react native app. I have created bottom tab navigator as follows and I have 5 more screens which i dont want in tabs but on those screens the normal three tabs bottom bar navigator is required. Exact help is appreciated.

const TabNavigation = createBottomTabNavigator(
{
    Scan: {
        screen: ScanScreen,
        navigationOptions: {                
            tabBarLabel: 'Scan',
            tabBarIcon: () => <Ionicons name="ios-qr-scanner-outline" size={32} color="blue" />
            ,
        },
    },
    Patient: {
        screen: PatientStack,
        navigationOptions: {                
            tabBarLabel: 'Patients',
            tabBarIcon: () => <Ionicons name="ios-people" size={32} color="blue" />
            ,
        },
    },
    Setting: {

        screen: SettingScreen,
        navigationOptions: {            
            tabBarLabel: 'Setting',
            tabBarIcon: () => <Ionicons name="ios-settings" size={32} color="blue" />
            ,
        },
    },        
},
{
    lazyLoad: true,
    animationEnabled: false,
    tabBarPosition: 'bottom',
    tabBarOptions: {

        showIcon: true,
        showLabel: true,
        activeTintColor: '#7117ea',
        inactiveTintColor: '#7117ea',
        style: {
            backgroundColor: '#eff0f1'
        },
        iconStyle: {
            width: 40

        },
        tabStyle: {
            height: 60
        }

    },
},
);

推荐答案

这是一个可以解决您问题的示例代码(希望如此)在此有三个场景，在底部栏中渲染了两个屏幕，单击链接后渲染了第三个场景，但底部栏将在那里.

This is an Example code which will solve your problem (Hope so) In this there are three scenes and in bottom bar two screens are rendered and the third scenes is rendered after clicking a link but the bottom bar will be there.

import React from 'react';
import { Button, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        <Button
          title="Go to Settings"
          onPress={() => this.props.navigation.navigate('Settings')}
        />
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Details!</Text>
      </View>
    );
  }
}

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

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

export default createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'red',
      inactiveTintColor: 'gray',
    },
  }
);

这篇关于在屏幕中显示导航底部栏，而不是 React Native 中的底部选项卡的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！