标签: react-native-navigation

我的应用程序有一个 TabNavigator，每个选项卡中都有一个 StackNavigator。通过单击不同的选项卡在堆栈之间导航时，我不会重置堆栈，因此当您更改选项卡时，堆栈包含以前的状态。但是，偶尔从一个选项卡中的屏幕中，我想导航到不同选项卡中的特定屏幕，在这种情况下，我想重置目标选项卡中的堆栈。

TabNavigator
    Tab1 
      StackNavigator
         - ScreenA
         - ScreenB
    Tab2
      StackNavigator
         - Screen1
         - Screen2

我希望能够在 Screen2 上放置一个按钮来重置 Tab1 上的堆栈。

我想知道此处文档中提到的“目标”参数是否有帮助，但没有关于如何使用它的示例。https://reactnavigation.org/docs/navigation-actions/

（我在这里搜索过，但为 4.x 建议的答案似乎不再适用）。谢谢！

我正在尝试反应原生导航,但我遇到了一个简单的问题.

该应用程序有一个没有选项卡的登录页面.(非常类似于facebook登录页面)(图片参考 - 图片只是为了给出一个想法.图片礼貌 - 谷歌 用户登录后,我想转换为基于标签的应用程序,我想要两个不同的导航堆栈标签(在Quora等应用中发生)(图片参考 - 再次图像只是一个参考)

我使用mobx进行状态管理.

我知道这是一个常见的用例,但我对我所知的两个选项感到困惑 -

1. 提供对用户登录变量的反应,并从单屏应用程序更改为基于选项卡的应用程序.(唯一关注的是当isLoggedIn发生反应时缺少动画)例如 - App.js

   constructor() {
   reaction(() => auth.isLoggedIn, () => app.navigateToHome())
   reaction(() => app.root, () => this.startApp(app.root));
   app.appInitialized();
   

   Run Code Online (Sandbox Code Playgroud)

   }

   startApp(root){
       switch (root) {
         case 'user.login':
           Navigation.startTabBasedApp({
             tabs: [
               {
                 label: 'One',
                 screen: 'user.login',
                 icon: require('./assets/one.png'),
                 selectedIcon: require('./assets/one_selected.png'),
                 navigatorStyle: {},
               }
             ]
             screen: {
               screen: root,
               title: 'Login',
               navigatorStyle: {
                 screenBackgroundColor: colors.BACKGROUND,
                 statusBarColor: colors.BACKGROUND
               },
               navigatorButtons: {}
             }
           })
           return ;
         case 'user.home':
           Navigation.startTabBasedApp({
             tabs: [ …

   Run Code Online (Sandbox Code Playgroud)

最近，我开始遇到此问题，当我在项目中安装react-native软件包（例如react-navigation：）时，一堆软件包都被删除了（我认为包括react，react-native）。

然后，当我尝试运行命令“ run-android”时，它说它无法识别。

我最近更新到最新的npm和react-native-cli。“ npm install”有问题吗？还是react-native？

node version: 8.1.2 <br/>
react-native-cli: 2.0.1 <br/>
react-native: 0.45.1 <br/>
react-navigation: 1.0.0-beta.11

下面是重新创建的步骤：

• 第1步-创建项目。

• 第2步-运行“ run-android”命令（可行）。

• 步骤3-将“ react-native-navigation”安装到项目中。

Notice in the image above. Seems like all the other packages are removed from the project.<br/><br/>

• 第4步-尝试再次运行“ run-android”命令。（将失败，但之前曾工作过）

对这个问题是什么以及如何解决这个问题有任何想法吗？

我正在尝试在我的应用程序上实现深度链接，我正在关注有关此主题的 expo-cli react-native-navigation 文档。基本配置完成后，我无法从我设置的任何链接中的route.params 获取参数。

这是我的代码的示例

链接.js

import * as Linking from "expo-linking";

const prefix = Linking.createURL("/");

const config = {
  screens: {
    userStartSession: {
      path: "home/:itemInfo",
      parse: { itemInfo: (itemInfo) => `${itemInfo}` },
    },
  },
};

const linking = {
  prefixes: [prefix],
  config,
};

export default linking;

文档在这里： https: //reactnavigation.org/docs/deep-linking/ 这里： https: //reactnavigation.org/docs/configuring-links/

然后将链接导入到Navigation.js

import React from "react";
import linking from "../utils/linking/linking";

export default function Navigation() {

  return (
    <NavigationContainer linking={linking} fallback={<Text>Cargando...</Text>}>
      <Stack.Navigator>
        <Stack.Screen
          name="userStartSession"
          options={{ headerShown: false, …

使用自定义样式删除 React 导航 6 中的标头，这是堆栈导航的代码

 <NavigationContainer>
  <Stack.Navigator
    initialRouteName='OtpScreen'
    // screenOptions={{
    //   headerShown: false,
    // }}
    screenOptions={{ headerMode: 'none' }}
  >
    <Stack.Screen
      options={{ headerShown: false }}
      name='Tabs'
      component={MyTabs}
    />

  </Stack.Navigator>
</NavigationContainer>

标签导航

   <Tab.Navigator
  useHeaderHeight={false}
  screenOptions={
    ({
      headerShown: false,
    },
    ({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;

        if (route.name === 'Home') {
          iconName = focused
            ? 'ios-information-circle'
            : 'ios-information-circle-outline';
        } else if (route.name === 'Settings') {
          iconName = focused ? 'ios-list' : 'ios-list';
        } …