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，然后将组件放置在所需的位置。这种做法将确保返回到先前的选项卡会将您以前的状态保存在先前的页面上。

如果有人感兴趣，我可以举个例子。目前没有任何回复，所以我将提交此答案。

尝试使标签图标在Android上可从TabBar移开

1 个答案: