0

对于 react native 应用程序导航，我在这里使用 react-native-navigation v2，我使用 bottomTabs 创建了导航。这是导航处理程序

import { Navigation } from "react-native-navigation";
import { width, height } from "../utils/screenResolution";
import { bottomTabIcon, topBarOpts } from "../components";

const sideBarWidth = width * 0.65;

export const goToAuth = () =>
  Navigation.setRoot({
    root: {
      stack: {
        id: "AuthNav",
        children: [
          {
            component: {
              name: "SignInScreen",
              options: {
                topBar: { visible: false, height: 0 }
              }
            }
          }
        ]
      }
    }
  });

export const goHome = async () => {
  let icon1 = await bottomTabIcon("CollectionScreen", "Collection", "archive");
  let icon2 = await bottomTabIcon("MainScreen", "Home", "home");

  let icon3 = await bottomTabIcon("CaptureScreen", "Capture", "camera");
  Navigation.setRoot({
    root: {
      sideMenu: {
        right: {
          component: {
            name: "SideBar"
          }
        },
        center: {
          bottomTabs: {
            id: "AppNav",
            children: [icon1, icon2, icon3]
          }
        },
        options: {
          sideMenu: {
            right: {
              width: sideBarWidth
            }
          }
        }
      }
    }
  });
  Navigation.mergeOptions("MainScreen", {
    bottomTabs: {
      currentTabIndex: 1
    }
  });
};

使用此 bottomTabIcon 函数创建的图标选项卡。

import Icon from "react-native-vector-icons/FontAwesome";
import { topBarOpts } from "./";
import { PRIMARY, BOTTOM_TAB_BACKGROUND, TAB_ICON } from "../../assets/color";

let bottomTabIcon = async (name, text, iconName) => {
  let icon = {
     stack: {
       children: [
         {
    component: {
      name: name,
      id: name,
      options: {
        bottomTab: {
          text: text,
          fontSize: 12,
          selectedIconColor: PRIMARY,
          iconColor: TAB_ICON,
          icon: await Icon.getImageSource(iconName, 20)
        }
      }
    }
         }
      ]
    }
  };

  if (name === "CaptureScreen") {
    icon.stack.children[0].component.options.bottomTabs = {
      visible: false,
      drawBehind: true,
      animate: true
    };
    icon.stack.children[0].component.options.topBar = {
      visible: false,
      height: 0
    };
  } else {
    icon.stack.children[0].component.options.bottomTabs = {
      backgroundColor: BOTTOM_TAB_BACKGROUND
    };
    icon.stack.children[0].component.options.topBar = await topBarOpts("Example");
  }

  return icon;
};

export { bottomTabIcon };

这是问题所在，当用户登录应用程序时，它在 MainScreen 中请求权限（相机、音频等）我想在特定屏幕上执行此操作，之后我发现底部选项卡中的所有屏幕都已安装。所以如果我打电话在 CaptureScreen 中的 componentDidMount 中执行它将在 MainScreen 中工作。我该如何解决这部分？我是 react-native 的新手，所以你可以在这段代码中发现一些奇怪的东西。感谢您的帮助和关注。

4

1 回答 1

1

仅在特定屏幕的挂载或不需要在父屏幕或导航器中的子屏幕中调用权限。

在您的情况下，您通过在反应导航中获取路线索引来调用它们。在子屏幕或需要权限的地方添​​加权限代码，它们将开始工作。

于 2019-07-08T12:27:12.297 回答