Question

我正在使用createBottomTabNavigator并将所有我的页面列出在一个名为Navigator.js的文件中。问题是我有一个名为“ AboutScreen”的页面，并且我不想在TabNavigator中显示。我只需要那里的'AboutScreen'即可使用

onPress={() => this.props.navigation.navigate('AboutScreen')}

在另一个名为SettingScreen.js的屏幕上。当我对Navigator.js中的AboutScreen实例使用上面的功能时，导航有效，但是“ AboutScreen”出现在底部选项卡中，这就是我所不想要的。有没有办法只隐藏底部选项卡中出现的“ AboutScreen”页面？我的以下代码：

//This is Navigator.js

const Tab = createBottomTabNavigator({
    Home:               {screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({tintColor, activeTintColor}) => (
               <Icon name="home" size={19} color={tintColor} />
               )
        },},
    Catalog:            {screen: CatalogScreen,
        navigationOptions: {
            tabBarLabel: 'Catalog',
            tabBarIcon: ({tintColor, activeTintColor}) => (
               <Icon name="local-library" size={19} color={tintColor} />
               )
        },},
    MyLibrary:          {screen: MyLibraryScreen,
        navigationOptions: {
            tabBarLabel: 'My Library',
            tabBarIcon: ({tintColor, activeTintColor}) => (
               <Icon name="star" size={19} color={tintColor} />
               )
        },},
    Setting:            {screen: SettingScreen,
        navigationOptions: {
            tabBarLabel: 'Setting',
            tabBarIcon: ({tintColor, activeTintColor}) => (
               <Icon name="settings" size={19} color={tintColor} />
               )
        },},
        AboutScreen:               {screen: AboutScreen,
        navigationOptions: {
            tabBarLabel: 'AboutScreen',
            tabBarIcon: ({tintColor, activeTintColor}) => (
                <Icon name="home" size={19} color={tintColor} />
                )
        },},
},{
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    showIcon: true,
    tabBarOptions:{
        showIcon: true,
        showLabel: true,
        activeTintColor: '#FEFEFE',
        inactiveTintColor: '#614B70',
        activeBackgroundColor: '#614B70',
        inactiveBackgroundColor: '#FEFEFE',
    }
});

//And this is the SettingScreen.js where i want to use the 'AboutScreen'

import React from 'react';
import { Platform, StatusBar, StyleSheet, View, Text, TouchableOpacity, ScrollView, Button, Image, TouchableHighlight } from 'react-native';
import { Icon } from 'react-native-elements';

export default class SettingScreen extends React.Component {
  render() {
    return(
      <ScrollView style={styles.container}>
        <TouchableOpacity style={styles.itemContainerTouchable}
        onPress={() => this.navigateScreen('Home')}>
          <View style={styles.itemContainer}>
            <Icon 
              name="settings"
              color={'#614B70'}
              style={styles.itemIcon}
            />
            <Text style={styles.itemText}>General</Text>
          </View>
          <View
          style={{height: 1, width: '100%', backgroundColor: '#614B70'}}
        />
        </TouchableOpacity>        
      </ScrollView>
    );    
  }
  navigateScreen(object) {
    this.props.navigation.navigate(object);
  }
}
//styles are irrelevant

Answer 1

您可以使用嵌套在BottomTabBarNavigator内部的StackNavigator，在嵌套的StackNavigator中，首先放置SettingsScreen，然后放置AboutScreen。然后，从选项卡栏中删除AboutScreen。一切都会按预期进行

Answer 2

您必须创建一个customBottomTabNavigator。

我现在正在使用的那个是

    import React from 'react'
import { BottomTabBar } from 'react-navigation-tabs'
import { View, TouchableWithoutFeedback, Dimensions } from 'react-native'
import { StyleSheet } from 'react-native';
var { height } = Dimensions.get("window")
const HiddenView = () => <View style={{ display: 'none' }} />
const TouchableWithoutFeedbackWrapper = ({
    onPress,
    onLongPress,
    testID,
    accessibilityLabel,
    ...props
}) => {
    return (
        <TouchableWithoutFeedback
            onPress={onPress}
            onLongPress={onLongPress}
            testID={testID}
            hitSlop={{
                left: 15,
                right: 15,
                top: 5,
                bottom: 5,
            }}
            accessibilityLabel={accessibilityLabel}
        >
            <View {...props} />
        </TouchableWithoutFeedback>
    )
}
export default TabBarComponent = props => {
    return <BottomTabBar
        {...props}
        style={styles.bottomBarStyle}
        getButtonComponent={({ route }) => {
            if (route.key === "ScreenToHideKey" )
                return HiddenView
            else return TouchableWithoutFeedbackWrapper
        }}
    />
}


const styles = StyleSheet.create({
    bottomBarStyle: {
        height: (height * 10.625) / 100   //your header height (10.625 is the %)
    }
})

然后在哪里使用createBottomTabNavigator：

{
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    showIcon: true,
    tabBarComponent: (props) => (<BottomBar {...props} ></BottomBar>) //remember to import it
    tabBarOptions:{
        showIcon: true,
        showLabel: true,
        activeTintColor: '#FEFEFE',
        inactiveTintColor: '#614B70',
        activeBackgroundColor: '#614B70',
        inactiveBackgroundColor: '#FEFEFE',
    }

createBottomTabNavigator：仅隐藏tabBar中的一个标签

2 个答案: