React Native版本0.62.2中的切换导航器
是指在React Native应用中实现页面之间的导航切换的工具或库。导航器是一个重要的组件，它允许用户在应用程序的不同页面之间进行导航，以提供更好的用户体验。
在React Native中，有几个常用的切换导航器可供选择，包括：
- React Navigation：React Navigation是一个流行的导航库，提供了多种导航器类型，如堆栈导航器（StackNavigator）、底部标签导航器（BottomTabNavigator）和抽屉导航器（DrawerNavigator）。它具有灵活的配置选项和丰富的功能，适用于大多数应用场景。推荐的腾讯云相关产品是腾讯云移动应用分析（MTA），用于分析和监控React Native应用的用户行为和性能。了解更多信息，请访问：腾讯云移动应用分析（MTA）
- React Native Navigation：React Native Navigation是由Wix开发的导航库，它提供了原生的导航解决方案，具有更高的性能和更好的用户体验。它支持堆栈导航、底部标签导航和抽屉导航等常见导航模式。推荐的腾讯云相关产品是腾讯云移动推送（TPNS），用于实现消息推送和用户通知功能。了解更多信息，请访问：腾讯云移动推送（TPNS）
- React Native Router Flux：React Native Router Flux是一个简单易用的导航库，它提供了基于场景（Scene）的导航方式。它支持堆栈导航和标签导航，并且具有灵活的配置选项。推荐的腾讯云相关产品是腾讯云移动直播（LVB），用于实现实时音视频直播功能。了解更多信息，请访问：腾讯云移动直播（LVB）
以上是React Native版本0.62.2中常用的切换导航器，根据具体的应用需求和个人偏好，可以选择适合的导航器来实现页面切换功能。
相关·内容
2回答
如何防止返回登录屏幕反应原生
、、、、
下面是我的登录和索引文件，登录后，如果按back键，它将返回登录。我是新的反应本机，请建议。我被困在这过去的一周。我正在使用世博会开发
login.js
userLogin = () => {
if(this.state.email === '' && this.state.password === '') {
Alert.alert('Enter details to signin!')
} else {
this.setState({
isLoading: true,
})
firebase
浏览 18提问于2020-07-12得票数 0
关于
堆栈导航的版本-@react导航/堆栈“："^5.9.3”
我正在尝试显示主屏幕装载。
错误详细信息
代码在App.js中的应用
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import NavigationContainer from '@react-navigation/native';
import { createStackNavigator } from '@react-navigati
浏览 4提问于2020-10-20得票数 1
回答已采纳
我已经分析了我的应用程序的需求，并决定我可以在web上使用移动友好的组件更有效地开发它，并在应用程序中通过web视图呈现它。
我需要权限才能访问相机和图库(拍摄照片/视频，上传照片/视频)。
基本上，一个带有webview的单屏应用程序显示了具有移动友好组件和上述权限的站点。
这是我当前的app.js：
import React from 'react';
import { Button, Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import Ionicons from &#
浏览 11提问于2019-07-12得票数 0
我有这个导航抽屉，这是非常好的工作时，点击按钮，从渲染方法，但如何打开时，点击，汉堡图标，，从navigationOptions。看了几个网站，但似乎什么都没有用。
部分工作博览会演示 ->
App.js
import React from 'react';
import { View, Text, Button, Animated } from 'react-native';
import { Provider as PaperProvider } from "react-native-paper";
import {
create
浏览 0提问于2018-11-28得票数 0
我找不出嵌套的导航器。我有一个带有以下按钮的bottomTabNavigator：
Home
Stations
-> StationDetail (StationScreen)
Shows
-> ShowDetail (ShowScreen)
在我的主页选项卡上，我有一个与站点页面相同的站的水平滚动。
问题:当我使用此代码导航到嵌套导航器时，当我从主页导航到站点详细信息页时，我无法导航回主/根StationsScreen选项卡
navigation.navigate('Stations', {
screen: 'Station',
浏览 0提问于2020-12-28得票数 3
回答已采纳
我真的不确定为什么我会收到这个错误，因为代码是从react网站文档中摘录的 (在https://reactnavigation.org/docs/tab-based-navigation/中使用选项卡导航代码示例后出现此错误) import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-ta
浏览 15提问于2020-07-15得票数 0
回答已采纳
1回答
如何更改组件中带有按钮的制表符
、、、、
最初的免责声明，我是第一次接触react/react-native和Expo，所以我的代码目前还不是最好的。 所以，我有一个带有按钮的类组件，它在我的应用程序中的两个不同的屏幕上使用，我想要那个按钮来更改当前的选项卡。 在我的App.js中，我创建了一个底部的选项卡栏，如下所示： import * as React from 'react';
import { Text, View, StyleSheet, ActivityIndicator } from 'react-native';
import { NavigationContainer } from
浏览 18提问于2020-07-20得票数 0
回答已采纳
我有一个关于react-native的问题。如何在加载初始路由时挂载所有组件？我正在使用反应导航的抽屉导航器。
浏览 1提问于2018-10-22得票数 0
在我的react原生项目中， 我安装了下面的 npm install @react-navigation/native @react-navigation/stack 在像下面这样编辑我的'app.js‘文件之后， import {createAppContainer, createSwitchNavigator} from 'react-navigation'
import {createStackNavigator} from 'react-navigation-stack'
import HomeScreen from './sc
浏览 13提问于2020-06-23得票数 0
回答已采纳
在我的一个旧项目中，我已经从react-Navigation3升级到react-Navigation4，当我尝试运行时，我得到了这个“createMaterialTopTabNavigator()已经移动到' react-navigation -tabs‘”的错误。在我的其他项目中，代码工作得很好。我甚至删除了node_modules并重新安装了它，但我仍然收到这个错误。有人能帮我解决这个问题吗？ 这是我的App.js import {createAppContainer, createSwitchNavigator, NavigationActions} from 'rea
浏览 35提问于2019-10-13得票数 1
1回答
我正在尝试使用react native.After创建项目并安装我想要使用的在导航器中使用的所有依赖项，例如：
const MainNavigator = createStackNavigator({
Dashboard: DashboardScreen,
ListSurveyor: {
screen: topSurvayorsNavigator,
navigationOptions: ({ navigation }) => {
const dispatch = useDispatch();
浏览 4提问于2020-01-12得票数 0
我要在我的项目中设计一个抽屉导航。
i通过以下命令安装了它：
npm install @react-navigation/drawer
然后将其导入App.js
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
这是我的package.json内容：
"@react-native-community/masked-view": "
浏览 1提问于2020-02-06得票数 30
回答已采纳
我已经从反应导航5升级到6：
- "@react-navigation/bottom-tabs": "^5.10.6",
- "@react-navigation/material-top-tabs": "^5.3.15",
- "@react-navigation/native": "^5.8.6",
- "@react-navigation/routers": "^5.6.0",
- "@react-navigation/st
浏览 13提问于2022-11-22得票数 1
回答已采纳
我的标签里有bottomTabNavigator，每个标签里面都有堆栈。每当我单击另一个选项卡时，我都想重置堆栈。 选项卡导航器- 选项卡1- |_Stack导航器 - Screen 1
- Screen 2 选项卡2- |_Stack导航器 - Screen 3
- Screen 4 选项卡3- |_Stack导航器 - Screen 5
- Screen 6 目前的情况是，。假设我在选项卡1上-我从屏幕1导航到屏幕2。
浏览 16提问于2020-04-03得票数 0
回答已采纳
使用react-native-jitsi-meet，只要我调用JitsiMeet.call()，我就会在安卓上崩溃。我在android studio logcat上得到了这些错误:没有找到react-native-gesture handler模块。确保您在本机平台上运行您的应用程序&错误: react- native -permissions: NativeModule.RNPermissions为空。
请建议如何修复此崩溃
浏览 1提问于2021-11-18得票数 0
3回答
我正在开发一个移动应用程序，需要你的帮助。我想在"auth“路径名中隐藏底部选项卡条。我尝试过几种方法，从堆栈溢出和谷歌，但它没有工作。我的守则：
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import {View} from 'react-native';
import Auth from './view
浏览 17提问于2022-09-17得票数 0
我对原生反应非常陌生。我将在这里分享我的代码App.js
import React, {Component} from 'react';
import Routes from './src/Routes';
export default class App extends Component {
render() {
return (
<Routes />
);
}
}
index.js
import React, { Component } from 'react';
import { App
浏览 0提问于2019-01-17得票数 6
2回答
我是react native的新手，我正在遵循有关auth flow的官方react导航文档中的本教程。https://reactnavigation.org/docs/en/auth-flow.html 他们有一个非常好的实例：https://snack.expo.io/@react-navigation/auth-flow-v3 登录后，当您单击Show me more of the app from the home screen时，它会将您带到一个带有后退按钮的页面。仅从代码上看，我就不明白他们是如何产生这个后退按钮的。 也许代码不完整？ 我知道在导航栏上后退按钮的一种方法是这样做：
浏览 21提问于2019-03-19得票数 1
回答已采纳
我是反应本地人的新手。我想要创建简单的抽屉导航，但这里有错误。
我已经安装了react导航。以下是代码：
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
StatusBar ,
TouchableOpacity
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import Screen1 from './Screen1';
浏览 0提问于2019-09-11得票数 0
回答已采纳
2回答
我正尝试在我的react原生应用程序中使用react导航来设置导航。
我尝试过使用其他包的导航功能，比如react-native-router和react-router。我看过stackoverflow上的其他答案，但似乎没有一个回答我的问题。下面是我正在使用的库及其版本
"react": "16.8.6",
"react-native": "^0.60.5",
"react-native-gesture-handler": "^1.4.1",
"react-
浏览 0提问于2019-09-03得票数 1
使用此处提供的建议示例代码https://github.com/dancormier/react-native-swipeout/blob/master/example/SwipeoutExample.js#L46 只要我启用了TouchableWithoutFeedback，我就无法刷卡。 下面是我的代码： return (
<Swipeout
right={swipeoutBtns}
rowID={0}
sectionID={0}
autoClose={true}
backgroun
浏览 20提问于2019-06-13得票数 0
我正在使用世博和反应本地创建一个简单的iOS应用程序。我目前正在得到这个错误，并且不知道如何修复它。我尝试过关于堆栈溢出的各种其他解决方案，但都没有效果。
我的代码是：
import 'react-native-gesture-handler';
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { NavigationContainer } from '@react-navigatio
浏览 2提问于2022-05-07得票数 1
回答已采纳
我想设置一个React Native应用程序与side menu和tab menu在同一时间。
我正在学习教程。
。
我知道错误：
未定义不是函数(近‘.(0，_reactNavigation.TabNavigator).“)
你可以在这里看到：
一些文件的预览：
App.js
import React from 'react';
import { Drawer } from './src/navigators';
export default class App extends React.Component {
render() {
浏览 0提问于2018-12-31得票数 4
回答已采纳
4回答
反应导航抽屉V5
、、、
我使用的是react导航版本5。我将选项卡导航和抽屉导航放在一起。
我试图在页眉中添加一个图标来打开/关闭抽屉：
这是我用来切换抽屉的自定义右标头：
const HeaderRight = ({ navigation }) => {
return (
<View style={{flexDirection: 'row'}}>
<TouchableOpacity
onPress={ () =>{ navigation.toggleDrawer()}}> //here is the pr
浏览 2提问于2020-02-20得票数 5
回答已采纳
我试图从Stack导航中更改tabBarBadge值：
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native'
浏览 29提问于2022-03-29得票数 0
回答已采纳
是的，我已经阅读了很多关于这个主题的帖子，但我仍然不能让我的项目工作:在我的App.js中，我有一个有条件的呈现登录屏幕或呈现屏幕。这也是我的AppContainer所在的地方。由我的头中的按钮触发的handleAddSubmit=()=>{}方法给出了未定义的错误。有什么建议吗？
App.js
return(
<View>
<AppNav/>
<Main
username={this.state.username}
onLoggedOut={this.LoggedOut}
浏览 28提问于2019-07-25得票数 0
回答已采纳
1回答
我试图通过props.naviagtion.getParam将数据从一个屏幕获取到另一个屏幕，但是我得到了一个错误:'TypeError: props.navigation.getParam不是一个函数‘(在“props.navigation.getParam(’docId‘)”中，'props.navigation.getParam’是未定义的)。我已经分享了代码，如果有人熟悉这个问题，您的帮助将不胜感激！
import { useNavigation } from '@react-navigation/core'
import React from '
浏览 15提问于2022-06-01得票数 0
回答已采纳
1回答
我正在尝试迁移我当前的代码库(react-Navigation4)来使用react-Navigation5。 迁移前的代码： AppNavigator.js import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { AuthLoading } from "../screens/auth";
import AuthStack from "./stacks/AuthStack";
import AppStack from "
浏览 10提问于2020-07-18得票数 0
这是该应用程序的外观，顶部为白色标题。
App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from
浏览 18提问于2022-03-05得票数 2
我在这里遵循这个教程：
教程中的人正在使用TabNavigator，但这不再是正确的方法，所以我改用createBottomNavigator。
下面是我的MainScreen组件代码
import React from 'react';
import {
View,
Text,
StyleSheet
} from 'react-native';
import ProfileTab from './AppTabNavigator/ProfileTab'
import LikesTab from './AppTab
浏览 9提问于2018-07-21得票数 0
4回答
我正在从反应导航库实现react-navigation-drawer。但面临的问题与标题有关。标题栏没有显示在任何屏幕中。
这是我的App.js
import React from "react";
import { StyleSheet, ScrollView, View } from "react-native";
//import DrawerNavigator from "./navigation/DrawerNavigator";
import { Platform, Dimensions } from "react-nativ
浏览 1提问于2019-09-15得票数 9
回答已采纳
我是一个初学者的反应和工作的一个项目，但我不能通过这个错误，我看了类似的主题，但仍然无法解决的问题，我会很高兴如果你们帮助我！
错误不变冲突:此导航器缺少导航支柱。在react导航v3和v4中，您必须直接设置应用程序容器。更多信息：此错误位于:在导航器(at MainComponent.js:81)、RCTView (at View.js:34)、View (at MainComponent.js:80)、Main (at App.js:7)、App (at renderApplication.js:45)、RCTView (at View.js:34)、View (at AppConta
浏览 4提问于2020-11-26得票数 0
1回答
我试图在我的项目上运行react-navigation v4，但是它在启动时总是崩溃
我重置了现金一百次，检查每个版本是否一致，并一步一步地遵循react-navigation文档的HelloWorld，即使是一个简单的例子也不起作用：
import React from 'react';
import { Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { AppRegistry } from 'reac
浏览 0提问于2019-10-26得票数 1
1回答
我在React Native中的导航器有问题。当我按下一些文本时，我想导航到另一个屏幕，但我得到了一个奇怪的错误，我不太确定为什么。
这是我的代码块和我收到的错误的图片。
'use strict'
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import ViewContainer from '../components/ViewContainer
浏览 0提问于2016-08-02得票数 0
我想在react原生应用中运行一个新项目。我没有得到任何错误，但是我的模拟器中的应用程序只显示空白页面。 首先，我编写了用于创建新项目的react-native init AwesomeProject。 然后我尝试实现我的react导航，如下所示： import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';
import Home from './MainTabNavigator';
import SignInScree
浏览 42提问于2019-03-23得票数 3
回答已采纳
1回答
嗨，我正在创建一个带有react原生的应用程序，我正在为菜单使用app导航，但是我发现了一个问题，现在当我创建带有底部选项卡的菜单时，也创建了一个标题，由于这个原因，它给了我一个问题，我想知道如何解决这个问题或者消除标题。
mi码是
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { cr
浏览 2提问于2021-08-06得票数 1
回答已采纳
我目前被一个反应导航问题困住了，我也咨询过这些文档，看起来我的设置是正确的，但是我可能遗漏了一些东西。我有一个连接到主屏幕的按钮，正在传递一个道具。
import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, Picker } from 'react-native';
// not sure if i need to import navigation? It seems to work since it's a screen
浏览 5提问于2020-03-14得票数 1
回答已采纳
我正在创建一个学习Reactive原住民的项目。我在这个项目上使用打字稿。我添加了react导航:为了使react导航工作，我不得不这样做：
yarn add @react-navigation/native
yarn add @react-navigation/stack
yarn add react-native-screens react-native-safe-area-context
yarn add react-native-reanimated react-native-gesture-handler
不幸的是，我在我的故事开始时有这样的警告：
WARN RCTBridge
浏览 17提问于2022-01-17得票数 8
回答已采纳
1回答
我试图在屏幕之间导航，但我不知道如何在第一个屏幕之后导航。这个问题也是关于类的导航，因为所有的例子都只显示了常量中的属性。
文件: index.android.js
const AppNative = props => {
return <AppScreen navigation={props.navigation} />;
};
const MyApp = DrawerNavigator( {
Home: { screen: AppNative },
Register: { screen: Register },
});
AppRegistry.registerC
浏览 0提问于2017-09-18得票数 0
1回答
描述
在将本地版本升级到0-62.2之后，我遇到了许多问题。这是以下问题之一：
--我以这一页为参考，编辑了它
React原生版本：
反应-本机-cli: 2.0.1
反应-原生: 0.62.2
**Expected Results**
clang: error: linker command failed with exit code 1 (use -v to see invocation)
ld: library not found for -lRCTAnimation
warning: The iOS Simulator deployment target 'IPHONEOS_
浏览 2提问于2020-04-27得票数 2
回答已采纳
React-Native中的Navigator和ViewPagerAndroid组件有什么不同？什么时候使用它们？似乎两者都可以用来在应用程序的不同屏幕之间导航。
浏览 2提问于2015-12-12得票数 0
我有一个使用react-navigation的React Native应用程序。我想在StackNavigator的4个特定屏幕之间滑动手势。从屏幕A，我想要在向左滑动时访问屏幕B，在向右滑动时访问屏幕C，在向上滑动时访问屏幕D。然后从屏幕B开始，例如，如果我向右滑动，我就会回到屏幕A，等等。 我在React Navigation3.x中找不到任何适合我的用例的东西。有什么建议吗，也许是在react-native-gesture-handler中？ 我已经查过这个链接了：How to swipe horizontally inside stackNavigator screens?
浏览 6提问于2019-10-15得票数 0
我在反应本土化方面是很新的，而且我正在收到这个错误。请帮忙！navigation.navigate is not a function. (In 'navigation.navigate("HomeScreen")', 'navigation.navigate' is undefined)
import { View, Text,Button,StyleSheet, TouchableOpacity } from 'react-native'
import React, {useState} from 'react'
浏览 4提问于2022-05-04得票数 0
回答已采纳
我的导航文件如下所示。在堆栈导航器中注册的所有屏幕都有一个标题。在抽屉导航器中注册为第二个选项的一个屏幕根本没有标题(OrdersScreen)。我也尝试在Stack导航器下添加它的条目，但是它没有改变任何东西。当没有显示标题时，OrderScreen中的OrderScreen没有任何效果。
import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
浏览 2提问于2021-04-06得票数 0
回答已采纳
当试图在视图中导航时，应用程序崩溃。并且错误日志中没有关于原因的足够信息。我已经尝试在节点版本或react导航之间切换，但似乎什么都不起作用，该项目还为主题实现了react-native-paper。导航中包含以下配置： const SomeView = createStackNavigator({
SomeView:{
screen: SomeViewScreen
},
AnotherView:{
screen: AnotherViewScreen
}
},
{
mode: 'card',
// headerMode: 'n
浏览 1提问于2019-09-03得票数 1
1回答
我有一个下一个问题:首先，我的Android studio崩溃了，我无法运行我的应用程序，然后出现了jetifier的问题，然后我有一个错误“当前聚焦的字段被弃用，将在未来的版本中删除”。有趣的事实:我以前没有见过这个错误。它是在Android Studio崩溃之后开始的。我的代码是： import React, { Component } from 'react'
import { View, TextInput, StyleSheet } from 'react-native'
import { SIGN_IN } from '../routes&
浏览 13提问于2021-06-28得票数 0
我有以下代码
Sidebar.js
import React from 'react'
import {View,Text,StyleSheet,Image,TouchableHighlight} from 'react-native';
import {Dimensions} from 'react-native';
import Feather from 'react-native-vector-icons/Feather';
// const WIDTH = Dimensions.get('window&#
浏览 10提问于2020-09-09得票数 1
回答已采纳
1回答
我是很新的反应本土和反应本土导航。我收到一个错误声明：
"message": "No overload matches this call.\n Overload 1 of 2, '(...args: never): void', gave the following error.\n Argument of type 'string' is not assignable to parameter of type 'never'.\n Overload 2 of 2, '(options: nev
浏览 8提问于2022-09-27得票数 2
回答已采纳
1回答
我正在尝试创建一个功能，用户可以在点击图标时打开边菜单。
我刚开始使用react native，我有点困惑，因为我使用react大约一年了，现在使用hooks。
这是我目前的密码
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@
浏览 9提问于2021-02-25得票数 0
我使用的是react-navigation版本6和react-native版本0.68。
/* package.json */
"dependencies": {
"@react-navigation/drawer": "^6.4.1",
"@react-navigation/native": "^6.0.10",
"react": "17.0.2",
"react-native": "0.68.2",
"
浏览 6提问于2022-06-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
