React Native Router Flux屏幕未在模型内部显示
React Native Router Flux是一个用于构建React Native应用程序的导航库。它提供了一种简单而强大的方式来管理应用程序的导航和屏幕之间的跳转。下面是对这个问题的完善且全面的答案：
React Native Router Flux是一个基于React Native的导航库，用于管理应用程序的导航和屏幕之间的跳转。它是基于React Native的官方导航库react-navigation的封装和扩展，提供了更简单和更灵活的API来定义和管理导航。React Native Router Flux的主要特点包括：
- 定义导航：通过定义导航栈，可以轻松地在应用程序的不同屏幕之间进行跳转。导航栈可以使用Router组件来定义，并可以通过Actions组件的方法进行导航操作。
- 路由参数传递：React Native Router Flux允许在屏幕之间传递参数。可以使用Actions组件的方法来传递参数，并在目标屏幕中使用this.props来访问这些参数。
- 灵活的导航：React Native Router Flux提供了一系列的导航方法，包括push、pop、replace等。这些方法可以根据应用程序的需要灵活地进行导航操作。
- 导航动画：React Native Router Flux支持多种导航动画效果，包括水平滑动、垂直滑动、淡入淡出等。可以通过在Router组件中指定不同的导航效果来实现。
- 路由配置：React Native Router Flux允许通过Route组件来定义屏幕的导航配置。可以通过配置不同的Route组件来指定不同屏幕的导航行为和样式。
- 嵌套导航：React Native Router Flux支持嵌套导航，可以在屏幕中嵌套其他导航栈。这使得应用程序的导航结构更加清晰和灵活。
React Native Router Flux的应用场景包括但不限于：
- 移动应用程序开发：React Native Router Flux适用于开发移动应用程序，并且可以帮助开发人员轻松管理应用程序的导航和屏幕之间的跳转。
- 多屏应用程序开发：如果应用程序有多个屏幕需要导航，React Native Router Flux提供了一种简单且灵活的方式来管理多个屏幕之间的导航。
- React Native学习和实践：对于正在学习和实践React Native的开发人员来说，React Native Router Flux是一个很好的选择，可以帮助他们更好地理解和使用React Native的导航功能。
在腾讯云中，推荐使用腾讯云移动基础能力（移动解决方案）来支持React Native应用程序的开发和部署。腾讯云移动基础能力提供了一系列的移动应用开发相关服务，包括推送服务、移动数据分析、实时音视频通信等，可以帮助开发人员快速构建高质量的移动应用程序。具体的产品介绍和链接地址请参考腾讯云官方文档。
相关·内容
我使用react native和react-native-router-flux进行导航
当我想要移动屏幕时，出现错误"currentlyFocusedField已弃用，将在将来的版本中删除。使用currentlyFocusedInput“
但是屏幕仍然随着错误而移动。
我该如何修复它？
这是我的路由器
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import {
Router,
Scene,
Stack
浏览 4提问于2020-07-16得票数 7
尝试从一个使用4.0.0-beta.28的超级简单的react-native-router-flux示例开始。我收到可怕的红色屏幕，显示Action is undefined。我猜我有一些语义上的错误？
下面是我的代码：
import React, {Component} from 'react'
import {Scene,Router} from 'react-native-router-flux';
import LoginScreen from '../shoppinglist/screens/login'
import Landing
浏览 9提问于2018-02-26得票数 1
我在使用react-native-router-flux时遇到组件类对象错误，这是我的app.js文件和组件文件。 app.js import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import ScarletScreen from './components/ScarletScreen';
import GrayScreen from './components/GrayScreen';
import {R
浏览 26提问于2019-02-24得票数 0
回答已采纳
1回答
我正在app.How中使用react-native router-flux进行导航，我是否要更改已登录用户的初始屏幕？目前，在成功登录后，用户将直接转到firstScreen。但在我关闭并重新打开应用程序后，初始屏幕将是登录屏幕，因为我已经在Main中将其设置为初始屏幕。我想要显示firstScreen，如果用户退出应用程序时没有登录out.So，我如何根据情况进行更改。
import React, { Component } from 'react';
import {KeyboardAvoidingView, View, ActivityIndicator
浏览 0提问于2018-11-08得票数 0
大家好:我在一个react本机项目中使用react-native-router-flux (v.3.39.2)，但今天它显示了以下警告：
警告: SceneView有一个名为shouldComponentUpdate()的方法。在扩展shouldComponentUpdate时不应该使用React.PureComponent。如果使用React.Component，请扩展shouldComponentUpdate。
这是我的切入点：
import React from 'react';
import { AppRegistry, StyleSheet, Platform
浏览 2提问于2017-06-08得票数 0
我正在使用react-native-router-flux显示一个抽屉菜单，但当我单击汉堡包菜单时，它正在工作。但是，当我尝试从左向右滑动时，菜单没有显示，当我在菜单外单击时，也无法隐藏。
这是我的路线：
export default class App extends Component {
render() {
return (
<Router>
<Scene>
<Drawer
hideNavBar
浏览 12提问于2020-05-24得票数 0
我正在使用RNRF库在我的应用程序中跨屏幕导航。我有一个基于令牌的身份验证机制，每当用户单击Logout并删除保存在AsyncStorage中的令牌时，我就想注销用户。
我的路由器文件
import React from 'react';
import { Text } from 'react-native';
import { Scene, Router } from 'react-native-router-flux'
const RouterComponent = () => {
return (
<
浏览 7提问于2018-08-03得票数 0
回答已采纳
我的应用程序中有闪屏，5秒后它会导航到另一个屏幕。 我想要的是闪屏应该只显示在第一次时，应用程序被加载，一旦用户出来的应用程序和打开它，然后它不应该显示闪屏。 以下是我的代码 import React, { Component } from 'react';
import { View, ImageBackground, StyleSheet, BackHandler, Alert } from 'react-native';
import { Actions } from 'react-native-router-flux';
import
浏览 11提问于2019-04-22得票数 0
所以我尝试使用一个叫做react-native-router-flux的包；
但每次我导入它时：
import { Scene } from 'react-native-router-flux';
我得到了一个奇怪的错误：
TypeError: null is not an object (evaluating '_RNGestureHandlerModule.default.Direction')
并且我已经安装了这两个包：
"react-native-gesture-handler": "^1.8.0",
"re
浏览 10提问于2020-11-12得票数 1
我是新来的本地人。我试图使用路由器从‘反应-本机-路由器-通量’。但我发现了一个错误：
Router.js:135 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at Module../node_modules/react-native-router-flux/src/Router.js (Router.js:135)
at __webpack_require__ (bootstrap:789)
at fn (bootstrap:100)
at
浏览 1提问于2022-05-28得票数 1
当我尝试使用'npm install‘命令为一个在mac计算机上运行正常的项目安装react本机节点模块时，我遇到了奇怪的问题；但当我在windows 10上运行它时，它以错误消息结束，指出命令失败为’‘。(点)命令无法识别。
下面是调试失败代码片段。我非常感谢任何人指导我解决这个问题。非常感谢。
2092 info run react-native-router-flux@4.0.6 postinstall node_modules/react-native-router-flux ./node_modules/.bin/opencollective postinstall
2093
浏览 1提问于2021-09-29得票数 0
我刚刚安装了这个项目，并在我的设备上运行了它，但是它显示了"ListView已从ReactNative中删除“这个错误。我不明白为什么会发生这种情况，因为我没有在项目中使用列表视图。这是屏幕截图。
我认为这个错误来自于node_modules库。它们使用列表视图。
Package.json
{
"name": "demo_app",
"version": "0.0.1",
"private": true,
"scripts": {
"start"
浏览 0提问于2019-08-20得票数 1
我有这个基本的React，一旦我从react-native-router-flux导入任何东西，它就无法编译。它抛出未找到的模块:无法解析@react导航/核心
如果我取消评论行import { Router, Scene } from "react-native-router-flux";，一切都很好。我也手动做了npm install @react-navigation/core，但是没有用
import React from "react";
import { Router, Scene } from "react-native-router-fl
浏览 2提问于2021-11-12得票数 0
回答已采纳
我已经在我的应用程序中使用了react-native-router-flux，并配置了商店，它工作得很棒。
我现在计划在我的应用程序中使用react-NavigationV2.8，我正在努力完成configureStore。
我假设configureStore将按照react-native-router-flux示例的方式使用。下面是我的react-native-router-flux示例中的示例代码。
/* global __DEV__ */
import { Router } from 'react-native-router-flux'; //this is not to
浏览 0提问于2018-12-30得票数 0
1回答
我正在使用react-native-router-flux作为路由器。这是我的第一个RN应用程序，在其中我有一个主屏幕，和一个聊天屏幕。我的主屏幕工作良好，我能够成功地导航到聊天屏幕上的按钮按下。然而，我的主屏幕有一个足够的形式和值，用户输入(名称)我想传递给聊天屏幕作为一个支柱。
主应用程序组件
import React, { Component } from 'react';
import Home from './components/Home';
import Chat from './components/Chat';
import
浏览 2提问于2017-09-30得票数 2
我正在使用和为react原生项目编写我的第一个测试
我的代码类似于
jest.autoMockOff();
jest.setMock('react-native', {
NativeModules: {}
});
jest.setMock('react-native-router-flux', {
Actions: {}
});
const mockStore = require('../../mock/Store');
const actions = require('../myActions');
...
/
浏览 1提问于2016-06-22得票数 1
1回答
我是新的反应和反应本地人。
我正在尝试设置一个简单的应用程序，使用本教程
我已经用这个命令设置了我的应用程序
create-react-native-app my-project
我启动应用程序，在我的手机上看到它的博览会。
然后
npm i react-native-router-flux --save
我将App.js的内容替换为该教程中的所有代码。我还创建了所需的PageOne.js和PageTwo.js。
然后我的手机上就会出现一个错误。
反应-本机路由器流量支持应该被定义。
断言c:\my path...\react-native-router-flux\src\Util.js@
浏览 3提问于2017-06-25得票数 0
回答已采纳
版本
"react": "16.0.0-alpha.6",
"react-native": "0.43.4",
"react-native-router-flux": "^3.38.1"
一切工作都很完美，但安装后react-native-router-flux都是死掉的，给了太多的错误。
Failed to build DependencyGraph: @providesModule naming collision:
Duplicate module name: react-native
浏览 0提问于2017-04-24得票数 0
回答已采纳
4回答
我有一个视图，我试图通过反应-本机路由器-流量模块加载。
但是，它没有在模拟器上显示屏幕。但是，我可以在react dev工具中看到我的组件。
我没有看到任何错误，只有一个空屏幕上的Android模拟器。详情如下：
Test.js：
import React from 'react';
import { Text, View } from 'react-native';
const Test = () => {
return (
<View style={{margin: 128}}>
<Text&
浏览 8提问于2017-07-14得票数 5
回答已采纳
1回答
在主屏幕上单击后退出应用程序
、、、、
我正在使用react-native-router-flux进行react-native导航。我的react-native应用程序上有4个场景堆栈。
当应用程序首次在主屏幕上启动时，单击“后退”按钮将按预期退出应用程序。
但是，当我导航到任何其他屏幕并返回到主屏幕时，后退按钮似乎不再起作用。
以下是代码片段：
onBackPress() {
if (Actions.state.index === 0) {
return false;
}
Actions.pop();
return true;
}
<Router backAndroidH
浏览 6提问于2017-12-20得票数 4
我想在导航var上显示右按钮，但是没有呈现。请给我解决办法或一些建议。
错误
ExceptionsManager.js:73警告:不能在现有状态转换期间更新(例如在render或其他组件的构造函数中)。呈现方法应该是道具和状态的纯函数；构造器副作用是一种反模式，但可以移动到componentWillMount。
环境
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-native-router-flux"
浏览 3提问于2017-08-15得票数 0
这是我当前正在工作的登录页面。一切都很好
import React, { Component } from 'react';
import {AlertIOS , StyleSheet , View , Text} from 'react-native';
import Button from 'react-native-button';
import {Actions } from 'react-native-router-flux';
class Login extends Component {
render()
浏览 0提问于2017-07-18得票数 0
我正在写一个应用程序，一切都很好，直到我不得不安装和使用react-native-router-flux。它的版本似乎有问题，但我找不到它。这是我得到的错误(来自我导入的react-native-router-flux行)：
undefined is not an object (evaluating 'ReactInternals.ReactCurrentOwner')
我已经搜索过了，但是没有一个建议起作用！如果有人能帮助我，我将不胜感激。
package.json：
{
"name": "Manager",
"version
浏览 5提问于2018-08-01得票数 1
回答已采纳
我正在使用react native router flux在我的react原生项目中导航。Router flux有一个默认的navBar。
有没有一种方法可以自定义navBar？例如，改变文本和背景的颜色。
我尝试在node_modules/react-native-router-flux/src/navBar.js中编辑该文件，但似乎不起作用。
请帮帮我。
浏览 0提问于2017-02-27得票数 7
无论我是否在渲染代码中使用Provider，我都会得到一个空白屏幕。然后，我发现即使我只是从react-redux导入Provider，我也会得到一个空白屏幕。但如果我注释掉import { Provider } from 'react-redux'，这些应用程序就能成功地工作。
正如官方repo所建议的那样，我已经检查了没有与npm ls react一起安装的重复的react模块，并且react-redux的版本高于5，它应该可以与react-native一起工作。
我该如何解决这个问题呢？谢谢。
App.js：
import React from 'react
浏览 0提问于2017-09-25得票数 1
我有一个带有两个制表符场景的Router设置：
选项卡1:有2个可导航场景(静态屏幕)；
屏幕A:有一个按钮可以导航到屏幕B；
屏幕B:只有一个文本；
标签2:只有一个静态屏幕。
屏幕C:只有一个文本；
代码如下。
app.js:
import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Tab from '../tab';
import ScreenA from &
浏览 3提问于2016-10-27得票数 6
回答已采纳
我对原生react非常陌生，并且我在使用路由Action.home()时遇到了问题。有人能帮上忙吗，谢谢先期.. import React from 'react';
import {Router, Scene} from 'react-native-router-flux';
import Login from './Login';
import Redeem from './Redeem';
const Routes = () => (
<Router>
<Scene key="
浏览 36提问于2020-04-20得票数 0
我在一个屏幕上有一个用户列表，当您单击列表中的任何项时，它会通过使用用户的id调度showProfile操作来显示单个用户，正如您在ListItem代码中所看到的：
import React, {Component, PropTypes} from 'react'
import { connect } from 'react-redux'
import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native'
import {Actions} from 'r
浏览 3提问于2017-01-22得票数 1
我的package.json
"react-native": "~0.63.4",
"react-native-router-flux": "^4.3.1",
我有以下代码
import { Router, Stack, Scene, Modal } from "react-native-router-flux";
<Router>
<Modal>
<Stack key="root" modal={true}>
&
浏览 10提问于2022-05-08得票数 0
回答已采纳
正如您在我的简单代码中所看到的，我没有使用createNavigationContainer/createAppContainer，但是我得到了这个错误。我不知道为什么会这样。我被卡住了！
import React, { Component } from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
import LogIn from './pages/LogIn';
import SignUp from './pages/SignUp&#
浏览 1提问于2019-11-11得票数 2
回答已采纳
我导入了react本机路由流，并尝试在genny运动模拟器中运行应用程序，甚至在我们创建的基本示例应用程序中，我也得到了这样的错误。
需要未知模块“缓冲区”
import { Router, Scene } from 'react-native-router-flux';
这就是我在package.json上的文章
{
"name": "HelloFlux",
"version": "0.0.1",
"private": true,
"scripts"
浏览 3提问于2016-05-19得票数 1
回答已采纳
1回答
这是我的router.js文件中的代码(摘自 docs部分)：
import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import PageOne from './PageOne';
import PageTwo from './PageTwo';
export default class App extends Component {
render() {
return
浏览 2提问于2017-01-09得票数 2
回答已采纳
我只需要退出react-native应用程序，当我在主页(屏幕)上并单击后退按钮时，我已经编写了代码，但它从每个屏幕上退出应用程序。我正在使用Router-Flux进行路由，好心的人帮我解决我的问题，到目前为止我已经尝试过了：
componentDidMount = async () => {
BackHandler.addEventListener("hardwareBackPress", this.handleBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener(&#
浏览 20提问于2019-03-27得票数 0
我尝试使用反应-本机-路由器-流量在导航栏上的右按钮。
我的代码是
import React from 'React';
import { TouchableHighlight } from 'react-native';
import { Scene, Router, Actions } from 'react-native-router-flux';
...
const filterIcon = () => (
<TouchableHighlight onPress={()=>} style={{...}}>
<
浏览 1提问于2016-08-19得票数 1
回答已采纳
1回答
我刚接触react-native，所以我认为"HTML“而不是"native”可能有点太多了，所以我的问题可能看起来很愚蠢。
我使用react- native -router-flux进行路由，而本地base则用于一些不错的组件。我也想使用原生基础的Header/Content/Footer，但我没有找到一种方法来让它工作。
为了拥有Header/Content/Footer，这些组件必须包装在Container组件中。我没有找到一种使用react-native-router-flux的方法。
我的头在导航栏周围，内容在每个场景组件中。
(对于标题，我做了一个自定义导航栏，它扩
浏览 0提问于2016-11-17得票数 3
当我单击菜单到另一个场景时，有人能帮助我如何关闭sidemenu响应本地流量吗？
我试过了，但还是无法接近
这里是我的drawerlayout.js代码
import React, { Component } from 'react';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';
expo
浏览 4提问于2017-05-02得票数 0
回答已采纳
我读了
将react-native-router-flux用于导航器，但当我将其与nativebase一起使用时。nativebase的组件不活动
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import { AppRegistry,Text,View,Navigator } from 'react-native';
import { Containe
浏览 2提问于2016-10-09得票数 5
1回答
Environment:
"react-native": "0.57.1",
"react-native-router-flux": "^4.0.5",
当道具通过Actionskey从一个屏幕传递到另一个屏幕时，会给我一个错误:我调用的道具是未定义的。
我找了很多这个问题，却什么也没发现
Screen1：
<View>
<Button
title="click me"
onPress={() => Actions.Screen2({id:5})}
/>
&
浏览 1提问于2018-10-08得票数 2
回答已采纳
我正在使用react-native-router-flux，我面临着一个问题，当我多次点击一个按钮时，它会多次导航到同一个屏幕，我如何防止多次点击？
浏览 23提问于2019-02-13得票数 1
回答已采纳
本机路由器-通量的选项卡‘。当我使用选项卡时，屏幕顶部的Navbar就会出现。所以我想移除那个纳瓦巴。但我做不到。请帮帮我！
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TextInput,
Navigator,
View
} from 'react-native';
import {Scene, Router} from 'react-native-router-flux';
import Home f
浏览 1提问于2016-11-01得票数 1
回答已采纳
我已经为我的学习项目安装了react-native-router-flux。我需要知道它的确切版本是什么，所以在我的项目文件夹中，我使用了react-native-router-flux -version，但它不起作用。如何通过CMD获取版本？
浏览 7提问于2017-08-15得票数 1
如何将react-native-router-flux与react-native-drawer一起使用。我使用版本3.38.0表示react-native-router-flux。我尝试调用Actions.refresh({key：'drawer'，open: value =>！work.Here })；但它没有调用，因为它是我的抽屉导航代码。
import React, { Component } from 'react';
import Drawer from 'react-native-drawer';
import SideMenu
浏览 0提问于2017-09-30得票数 0
我使用Reactive原住民，在我的“初始”屏幕上识别“未定义”有困难，指定为"Home“。这是密码。
Routes.js
import React from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Home from './Home.js'
import About from './About.js'
import Login from './Login.js'
import Other from &#
浏览 5提问于2020-08-18得票数 0
回答已采纳
我正在尝试测试reazy react-native framework，我无法启动和运行示例应用程序。
当我运行react-native run-ios命令时，我得到以下错误：
无法解析模块react/lib/reactComponentwithPureRenderMixing node_modules/react-native-router-flux/node_modules/react-addons-pure-render-mixin/index.js模块在模块映射中不存在
我已经删除了我的模块并重新安装了它们。模块文件夹是用于react-native-router-flux的
J
浏览 2提问于2017-07-20得票数 0
我一直在为我的原生应用程序使用react- native -router-flux包，用这个包替换了react-navigation。 然而，似乎不能制作图标来显示。(使用react导航，它可以工作，图标也在那里) 附上我的代码： import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Icon from '@expo/vector-icons/FontAwesome';
import HomeScreen
浏览 35提问于2019-10-15得票数 0
0回答
不是视图切换后的函数
、、、
在使用react-native-router-flux切换视图时，我遇到了react-native的问题。
mapMarkerGen(){
if(mapMarkersFetched){
_this = this;
return mapMarkers.map(function(marker, i){
return(
<MapView.Marker
key={i}
coordinate={{
longitude: parseFloat(marker.lo),
latitude: pa
浏览 0提问于2017-06-18得票数 0
回答已采纳
1回答
我正在尝试运行开玩笑的案件在反应本土化。我正在使用进行导航。由于这个错误，我的测试用例失败了。
Test suite failed to run
TypeError: Cannot read property 'isRTL' of undefined
at Object.<anonymous> (node_modules/react-native-router-flux/dist/NavBar.js:286:44)
at Object.<anonymous> (node_modules/react-native-rou
浏览 2提问于2018-06-22得票数 2
回答已采纳
1回答
我在试着做 (意大利香菜)
我有一个listView，上面有几张具有特定宽度/高度的卡片。当我点击它时，我需要创建一个带有附加信息的fullScreen (onPress也是如此)。
我使用：react-native: 0.30.0和react-native-router-flux: 3.33.0进行场景/活动之间的路由
有谁知道如何做全屏转换？
不管是不是针对react-native-router-flux的。我试过在react-native上使用LayoutAnimation，但是什么都不能用(我在网上找到的唯一一个例子是没有编译)
浏览 1提问于2016-08-17得票数 2
1回答
所以我还是有点新的反应本土化，但我有一个应用程序的工作方式，几乎我希望它。我有App.js，它使用TabBarIOS组件在屏幕底部显示我的选项卡导航。当您触摸一个选项卡时，状态更新和相关内容将被加载和显示：
App.js
import React, { Component } from 'react';
import { TabBarIOS, Platform, Image } from 'react-native';
import IconII from 'react-native-vector-icons/Ionicons';
import
浏览 2提问于2017-05-05得票数 1
回答已采纳
执行模拟器的终端显示以下错误：
Failed to build DependencyGraph: @providesModule naming collision:
Duplicate module name: ViewportMetrics
Paths: /Users/fcojriosbello/Documents/Development/netbeast/node_modules/react/lib/ViewportMetrics.js collides with /Users/fcojriosbello/Documents/Development/netbeast/node_modul
浏览 1提问于2016-07-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
