代码之家 › 专栏 › 技术社区 › syam

在不属于react native底部选项卡的屏幕中显示导航底部栏

navigator react-native

syam · 技术社区 · 6 年前

我在react native应用程序中有三个选项卡和8个屏幕。我已经创建了如下底部选项卡导航器,我还有5个屏幕,我不想在选项卡中,但在这些屏幕上,正常的三个选项卡底部栏导航器是必需的。非常感谢您的帮助。

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
        }

    },
},
);

1 回复 | 直到 6 年前

Pramod 6 年前

其中有三个场景,在底部栏中渲染两个屏幕,在单击链接后渲染第三个场景,但底部栏将在那里。

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