试图使标签图标在 Android 上远离 TabBar 时可点击

Question

我正在尝试让我的选项卡图标在单击时呈现它们的屏幕并且当它们不在 TabBar 中时。它适用于 IOS，但不适用于 Android。似乎选项卡选择范围只能在 TabBar 内达到，不能在外部达到，高于它不附加到其图标。单击其图标时，有什么方法可以使其在 TabBar 之外工作？谢谢

我尝试的另一种方法是将 TabBar 高度设置为屏幕的 100%，并将其 backgroundColor 设置为透明以查看后面的屏幕，但它显示的是白色屏幕并隐藏了其后面的内容。

import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native'
import {
  createBottomTabNavigator,
  createAppContainer
} from 'react-navigation'
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp
} from 'react-native-responsive-screen'
class DocSelection extends React.Component {
  render() {
    return ( <
      View style = {
        styles.container
      } >

      <
      Text > CustomerService < /Text>

      <
      /View>



    )
  }
}
class Printing extends React.Component {
  render() {
    return ( <
      View style = {
        styles.container
      } >

      <
      Text > hfhdfjedhfeehfjeh < /Text>

      <
      /View>

    )
  }
}
class Design extends React.Component {
  render() {
    return ( <
      View style = {
        styles.container
      } >

      <
      Text > 874877847484787 < /Text>

      <
      /View>
    )
  }
}
const RouteConfigs = {
    'Home': {
      screen: DocSelection,
      navigationOptions: { //tabBarButtonComponent: tabBarIcon: ({ tintColor, horizontal }) => (
        <
        Image style = {
          {
            margin: 15,
            width: 35,
            height: 35,
            tintColor: "red"
          }
        }
        source = {
          require("../Icons/home.png")
        }
        /> ), }, }, 'Order history':{ screen: Printing, navigationOptions: { backgroundColor: '#262A2C', top:-60, borderTopWidth: 0, tabBarIcon: ({ tintColor }) => ( <
        Image style = {
          {
            width: 32,
            height: 32,
            tintColor: "red"
          }
        }
        source = {
          require("../Icons/history-clock-button.png")
        }
        /> ), }, }, 'Customer service':{ screen: Design, navigationOptions: { tabBarIcon: ({ tintColor }) => ( <
        Image style = {
          {
            top: 0,
            margin: 15,
            width: 40,
            height: 40,
            tintColor: "red"
          }
        }
        source = {
          require("../Icons/customer-service.png")
        }
        /> ), }, }, }; const DrawerNavigatorConfig = { intialRouteName: 'Home', navigationOptions: { tabBarVisible: true }, tabBarOptions: { tabStyle:{ top:-130, height:0 }, showLabel: false, style:{ backgroundColor:"rgba(255, 0, 0, 0)" }, }, }; const Navigator = createBottomTabNavigator(RouteConfigs, DrawerNavigatorConfig);
        export default createAppContainer(Navigator);
        const styles = StyleSheet.create({
          container: {
            flex: 1,
            justifyContent: 'center',
            backgroundColor: '#ecf0f1',
            top: 300
          }
        });

Answer 1

如果有人对答案感兴趣，您只需创建一个组件并导航到相关选项卡。确保选项卡可见性为 false，然后将组件放置在您想要的位置。这种做法将确保返回到以前的选项卡将保存您在以前页面上的先前状态。

如果有人感兴趣，我可以发布一个示例。目前没有回复，所以我将提交此答案。

我的结构有点不同，但这是一个更简单的案例，希望对您有所帮助 示例：

import React from 'react';
import {View,TouchableOpacity, PixelRatio, Image} from 'react-native'
import { createBottomTabNavigator, createAppContainer} from 'react-navigation'
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'

class Home extends React.Component{

render(){
  const {navigation} = this.props;
  const { routeName } = navigation.state;
return(

 <View style={{flex:1,
 backgroundColor:'grey'}}>
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() => {
                  navigation.navigate("Home")
              }}
                style={ {position: 'relative',
                width:  PixelRatio.get() <= 2 ? 40 : 45,
                height: PixelRatio.get() <= 2 ? 40 : 45,
                alignItems: 'center',
                justifyContent: 'center',
                left: wp('5%'),
                top: hp('11.5%'),
                backgroundColor:routeName==="Home" ? 'black' : 'white' ,
                borderRadius: PixelRatio.get() <= 2 ? 40/2 : 45/2}}>
                <Image

                source={require("./Icons/category.png")} 
                //pay FlatIcon or design personal one
                style={{ resizeMode: 'contain',
                width: PixelRatio.get() <= 2 ? 25 : 30,
                height: PixelRatio.get() <= 2 ? 25 : 30,
                tintColor: routeName==='Home'?'#81F018' : '#262A2C',
                }}
                />
                </TouchableOpacity>
                <TouchableOpacity
                  activeOpacity={0.7}
                  onPress={() => {
                    navigation.navigate("Alt")
                }}
                  style={ {position: 'relative',
                  width:  PixelRatio.get() <= 2 ? 40 : 45,
                  height: PixelRatio.get() <= 2 ? 40 : 45,
                  alignItems: 'center',
                  justifyContent: 'center',
                  left: wp('5%'),
                  top: hp('11.5%'),
                  backgroundColor:routeName==="Alt" ? 'black' : 'white' ,
                  borderRadius: PixelRatio.get() <= 2 ? 40/2 : 45/2}}>
                  <Image

                  source={require("./Icons/category.png")} 
                  //pay FlatIcon or design personal one
                  style={{ resizeMode: 'contain',
                  width: PixelRatio.get() <= 2 ? 25 : 30,
                  height: PixelRatio.get() <= 2 ? 25 : 30,
                  tintColor: routeName==='Alt'?'#81F018' : '#262A2C',
                  }}
                  />
                  </TouchableOpacity>
              </View>)}}



class Alt extends React.Component{

  render(){
    const {navigation} = this.props;
    const { routeName } = navigation.state;
  return(

   <View style={{flex:1,
   backgroundColor:'white'}}>
   <TouchableOpacity
                activeOpacity={0.7}
                onPress={() => {
                  navigation.navigate("Home")
              }}
                style={ {position: 'relative',
                width:  PixelRatio.get() <= 2 ? 40 : 45,
                height: PixelRatio.get() <= 2 ? 40 : 45,
                alignItems: 'center',
                justifyContent: 'center',
                left: wp('5%'),
                top: hp('11.5%'),
                backgroundColor:routeName==="Home" ? 'black' : 'white' ,
                borderRadius: PixelRatio.get() <= 2 ? 40/2 : 45/2}}>
                <Image

                source={require("./Icons/category.png")} 
                //pay FlatIcon or design personal one
                style={{ resizeMode: 'contain',
                width: PixelRatio.get() <= 2 ? 25 : 30,
                height: PixelRatio.get() <= 2 ? 25 : 30,
                tintColor: routeName==='Home'?'#81F018' : '#262A2C',
                }}
                />
                </TouchableOpacity>
                <TouchableOpacity
                  activeOpacity={0.7}
                  onPress={() => {
                    navigation.navigate("Alt")
                }}
                  style={ {position: 'relative',
                  width:  PixelRatio.get() <= 2 ? 40 : 45,
                  height: PixelRatio.get() <= 2 ? 40 : 45,
                  alignItems: 'center',
                  justifyContent: 'center',
                  left: wp('5%'),
                  top: hp('11.5%'),
                  backgroundColor:routeName==="Alt" ? 'black' : 'white' ,
                  borderRadius: PixelRatio.get() <= 2 ? 40/2 : 45/2}}>
                  <Image

                  source={require("./Icons/category.png")} 
                  //pay FlatIcon or design personal one
                  style={{ resizeMode: 'contain',
                  width: PixelRatio.get() <= 2 ? 25 : 30,
                  height: PixelRatio.get() <= 2 ? 25 : 30,
                  tintColor: routeName==='Alt'?'#81F018' : '#262A2C',
                  }}
                  />
                  </TouchableOpacity>
                </View>)}}
const AppTabNavigator = createBottomTabNavigator({



  "Home": {
    screen: Home,

 },


  "Alt": {
    screen: Alt,

 },


   }, 
   {
       defaultNavigationOptions: {

           tabBarVisible: false
         },


   }
   )
export default createAppContainer(AppTabNavigator)