标签: react-navigation

当我安装并尝试使用react-navigation(从'react-navigation'导入{StackNavigator};)时,我尝试使用react-native并获得以下错误.

错误

我使用以下命令安装"react-navigation":npm install --save react-navigation

在运行上面的命令时,我在node_modules文件夹下得到'react-navigation'文件夹,只有一个文件(package.json).以下是文件的内容:

{
  "_args": [
    [
      {
        "raw": "react-navigation@0.0.0",
        "scope": null,
        "escapedName": "react-navigation",
        "name": "react-navigation",
        "rawSpec": "0.0.0",
        "spec": "0.0.0",
        "type": "version"
      },
      "/Users/rakesh-1812/Documents/REACT_JS/SimpleApp"
    ]
  ],
  "_from": "react-navigation@0.0.0",
  "_id": "react-navigation@0.0.0",
  "_inCache": true,
  "_location": "/react-navigation",
  "_nodeVersion": "4.2.1",
  "_npmOperationalInternal": {
    "host": "packages-12-west.internal.npmjs.com",
    "tmp": "tmp/react-navigation-0.0.0.tgz_1459892254509_0.1584461957681924"
  },
  "_npmUser": {
    "name": "ericvicenti",
    "email": "ericvicenti@gmail.com"
  },
  "_npmVersion": "2.14.7",
  "_phantomChildren": {},
  "_requested": {
    "raw": "react-navigation@0.0.0",
    "scope": null,
    "escapedName": "react-navigation",
    "name": "react-navigation",
    "rawSpec": "0.0.0",
    "spec": "0.0.0",
    "type": …

我看到很多人在反应导航问题部分使用this.props.navigation.dispatch以编程方式导航.是否有任何特定的原因或用例使用它this.props.navigation.navigate？

看起来您可以将更多选项传递给调度函数？还有别的事吗？您是否可以在没有明确地将反应导航绑定到您的应用程序redux商店的情况下使用调度？现在我有一个具有redux的应用程序,但我没有明确配置我的redux设置以了解react-navigation(如果可以的话,我更愿意保持这种方式).

我在反应原生项目中使用反应导航,我想用图像自定义标题.

对于一种颜色,我可以使用简单的样式,但由于本机反应不支持背景图像,我需要一个不同的解决方案.

我正在使用React-Navigation并且我有一个StackNavigator,这是带有Stack + Tabs Navigator的app.js:

import React from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';
import HomeScreen from './app/screens/HomeScreen';
import FriendsScreen from './app/screens/FriendsScreen';

const Stylelist = StackNavigator({
  Login:{
     screen: LoginScreen,
     navigationOptions: ({navigation}) =>({
       header: null,
     }),
  },
  Register:{
      screen: RegisterScreen,
      navigationOptions: ({navigation}) =>({
        header: null,
      }),
  },
  Home:{
     screen: HomeScreen,
     navigationOptions: ({navigation}) =>({
       title: "Home",
     }),
  },
});

const TabsNav = TabNavigator({
  Home: {
    screen: HomeScreen, …

我正在使用核心React Native Modal组件。在模态内容中，我有一个Done按钮。

按下Done是我们希望用户关闭模式的唯一方法。但是Modal组件允许从屏幕顶部向下滑动以关闭。

如何关闭“滑动关闭”功能？

这是我使用 react navigation v3.2.1 的导航堆栈：

1. 我有一个切换导航器可以切换到身份验证导航堆栈和经过身份验证的应用程序堆栈。

2. 应用程序堆栈是使用底部选项卡导航器制作的。

3. 我想为选项卡导航器使用自定义组件。

使用createBottomTabNavigator自定义tabBarComponent.

例如：

1. 假设标签导航堆栈有 2 个导航屏幕，即主页和聊天。
2. 在自定义 BottomBar 中，如何检查焦点/活动/当前路由名称是否为 Home/Chat，以便我可以分别更改图标的样式？

应用容器.js

const switchStack = createSwitchNavigator({
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack
}, {
    initialRouteName: 'AuthLoading',
})

export default createAppContainer(switchStack)

AppStack.js

const AppStack = createBottomTabNavigator({
    Home: {
        screen: HomeStack,
    },
    Chat: {
        screen: ChatStack
    },
}, {
    initialRouteName: 'Home',
    activeColor: '#f0edf6',
    inactiveColor: '#3e2465',
    shifting: false,
    barStyle: {
        backgroundColor: '#694fad',
    },
    labeled: false,
    tabBarComponent: ({navigation}) => <BottomBar navigation={navigation}/>
})

export …

由于分页和 React Native Navigation，我面临着一种复杂的问题。单击具有类别列表的抽屉，它们都将转到屏幕

问题陈述：

当我随机点击类别时，一切正常。但是，在分页过程中遇到问题。假设我单击类别消费者并滚动查看更多记录。之后，我单击移动类别。移动类别页面将显示一秒钟，然后调用之前的路线（消费者）。

我尝试使用以下代码来导航类别，但遇到了同样的问题。

代码：

1）。

this.props.navigation.navigate({
  routeName: "CategoryList",
  params: {
    cat_id: e.cat_id
  },
  key: Math.random () * 10000
})

2）。

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({
    routeName: 'CategoryList',
    params: {
      cat_id: e.cat_id
    }
  })],
});
this.props.navigation.dispatch(resetAction);

3）。

const pushAction = StackActions.push({
  routeName: "CategoryList",
  params: {
    cat_id: e.cat_id
  }
});
this.props.navigation.dispatch(pushAction);

当前行为

我有一个使用react-navigationv5 进行路由的本机应用程序。

1. 我的所有视图中都有一个抽屉（左侧偏移菜单）
2. 我使用 stackNavigation 进行页面转换。

由于(1)，我的结构是drawerNavigator (a) > stackNavigator (b) > views (c).

当我尝试useNavigation()在 my 中调用钩子时<DrawerContent />，出现以下错误：

Error: We couldn't find a navigation object. Is your component inside a navigator?
    at useNavigation (bundle.js:8766)

是的，我不在里面，stackNavigator所以无法调用钩子

预期行为

我希望在我的<DrawerContent />.

您的环境

| software                       | version |
| ------------------------------ | ------- |
| iOS or Android                 | iOS, Android and web
| @react-navigation/native       | 5.0.0-alpha.41
| @react-navigation/stack         | …

使用 react-navigation 4，我能够从“react-navigation”包中导入和使用 switchNavigator。

import {
  createAppContainer,
  createSwitchNavigator,
  createStackNavigator
} from "react-navigation";

import MainTabNavigator from "./MainTabNavigator";
import LoginScreen from "../screens/LoginScreen";
import AuthLoadingScreen from "../screens/AuthLoadingScreen";

export default createAppContainer(
  createSwitchNavigator(
    {
      App: MainTabNavigator,
      Auth: AuthLoadingScreen,
      Login: createStackNavigator({ Login: LoginScreen })
    },

    {
      initialRouteName: "Auth"
    }
  )
);

使用 react-navigation 5，我在包中看不到 createSwitchNavigator 了。该文档也没有帮助。现在不推荐使用吗？我的用例是在用户登录之前显示登录屏幕，并在用户登录后切换到应用程序。 React-navigation 给出了一个身份验证流程的例子，但是否可以使用 switchNavigator - 这似乎更简单。

正如您在下面看到的，我尝试了多种将背景颜色设置为绿色的方法，但都无济于事。背景像图像一样保持蓝色。

在inactiveColor和activeColor正在（白色，分别为红色）。

<NavigationContainer>

  <Tab.Navigator
    initialRouteName="HomeScreen"
    activeColor="red"
    inactiveColor="white"
    activeBackgroundColor="green"
    inactiveBackgroundColor="green"
    style={{ backgroundColor: 'green' }}
    tabBarOptions={{
      style:{
        backgroundColor: 'green'
      }
    }}
  >

    <Tab.Screen
      name="HomeScreen"
      options={{
        tabBarLabel: 'Home',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="home" color={color} size={26} />
        ),
      }}
    >
    {props => <HomeScreen {...props} state={this.state} />}
    </Tab.Screen>

    <Tab.Screen
      name="Files"
      component={FilesScreen}
      options={{
        tabBarLabel: 'Files',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="file" color={color} size={26} />
        ),
      }}
    />

  </Tab.Navigator>

</NavigationContainer>

包.json

"dependencies": {
  "@react-native-community/masked-view": "^0.1.7",
  "@react-navigation/material-bottom-tabs": "^5.1.7",
  "@react-navigation/native": …