在react导航createStackNavigator中使用mobx存储
在React导航中使用mobx存储，可以通过以下步骤实现：
- 首先，确保已经安装了mobx和mobx-react库。可以使用以下命令进行安装：
- 首先，确保已经安装了mobx和mobx-react库。可以使用以下命令进行安装：
- 在导航组件所在的文件中，导入mobx和mobx-react库：
- 在导航组件所在的文件中，导入mobx和mobx-react库：
- 创建一个mobx存储类，用于存储导航相关的状态和操作：
- 创建一个mobx存储类，用于存储导航相关的状态和操作：
- 在导航组件中使用mobx存储：
- 在导航组件中使用mobx存储：
这样，通过mobx存储，可以在导航组件中实现页面的推入和弹出操作，并且在页面中显示当前的导航栈状态。
相关·内容
我想在react导航中使用createStackNavigator中的Mobx存储变量。具体地说，我想使用商店动态更改初始路由(以便用户可以更改初始屏幕)。这有可能吗？一些关于……的事情。 const stack = createStackNavigator({
Home:{
...
},
{
initialRouteName: this.props.store.initialScreen
{
}) 因为这不是一个类，所以我不能集成mobx store。任何动态更改initialRoute的想法都将受到欢迎！谢谢
浏览 10提问于2019-04-07得票数 2
回答已采纳
我不能从我的代码解决这个问题..当我切换到胶片细节视图时，我得到了这个错误: Error: MobX injector: Store '...‘不可用！确保它是由某个提供商提供的
这是我的app.js APP.JS
import React from 'react';
import {StyleSheet, View, Text} from "react-native";
import Navigation from './Navigation/Navigation';
import FilmStore from './Stor
浏览 0提问于2018-09-26得票数 1
使用React测试mobx的新手。我正在测试一个简单的侧面导航栏，在汉堡菜单上打开/关闭。我已经为导航栏设置了一个商店：
export class Store {
toggle = false;
setToggle(bool){
this.toggle = bool;
};
};
decorate(Store, {
toggle: observable,
setToggle: action
});
export default createContext(new Store());
下面是导航栏组件：
export default
浏览 7提问于2020-05-09得票数 2
1回答
状态值不变
、、、
我试图使用mobx作为我的状态管理器来更改我的值状态的值。我使用变更方法上的一个条件语句在"Y“时呈现"X"，当"X”时呈现"Y“，但onPRess=它只是呈现"Y”，并且在再次单击时不会恢复为"X“。就像这种方法只发生了一次。有人能帮忙吗。
以下是有关守则：
进口主要：
import React from 'react';
import { StyleSheet, Image, Text, View, PermissionsAndroid, Platform, TouchableOpacity, PixelRatio,
浏览 0提问于2019-08-11得票数 1
回答已采纳
我正在尝试使用react导航v2。这就是我的App组件的样子：
import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import FirstScreen './firstscreen';
import SecondScreen './secondscreen';
const AppNavigator = createStackNavigator(
{
FirstScree
浏览 0提问于2018-05-15得票数 0
在我的反应本机应用程序中，我想在我的导航菜单中有条件地呈现路由。我在导航菜单中使用了react导航createBottomTabNavigator。
该条件基于用户角色，并通过api调用进行检索。
api调用不会在初始加载时发生.
我使用mobx-state-tree进行应用程序状态管理，角色存储在MST存储中。
当观察到的角色发生变化时，我必须用observer来装饰顶级容器observer。这似乎是低效的重新渲染在高层，我无法使它无论如何。
就我而言，不可能通过react-navigation提供的临时支持来传递道具。我不能将它们封装在实现这一目标的组件中，因为它们被用作专案的参数。
为了
浏览 0提问于2019-09-10得票数 1
我在我的react原生应用中使用了新的react导航2.16.0。
我有欢迎(登录和注册)屏幕，然后是主栈。主堆栈包括成功验证(login\register)后的所有屏幕。
MainStack = createStackNavigator(
{
Welcome: {
screen: Welcome, navigationOptions: {
gesturesEnabled: false,
}
浏览 1提问于2018-09-25得票数 1
1回答
我想用mobx反应和mobx。所以我创建了一个像这样的文件store.ts：
import { observable} from "mobx";
class store {
@observable test= ""; // path des Ws local
}
export default store;
在我的应用程序组件中，我有：
从“../存储/存储”导入存储；从“mobx-react”导入{观察者}；
componentDidMount() {
console.log("Store : "
浏览 0提问于2019-01-15得票数 1
回答已采纳
1回答
我的结构如下：
Switch导航器堆栈导航器LoginScreenDrawer导航器
- Stack navigator
- ListDirectivesScreen
应用程序在登录屏幕上启动。登录成功后，我通过this.props.navigate()连接到ListTasksScreen并将凭据传递给它。
然而，当用户现在通过打开抽屉并按下一项来改变屏幕时，参数丢失。没有凭据，我不能查询API。
代码：
export const app = createSwitchNavigator(
{
login: {screen: LoginSc
浏览 16提问于2018-06-09得票数 0
1回答
我试图让react路由器v4从store中的操作导航，而不显式地将history支柱传递给需要在某些逻辑运行后导航的每个存储操作。
我在寻找像这样的东西来工作：
import { NavigationStore } from 'navigation-store';
class ContactStore {
@action contactForm(name, message){
// Some logic runs here
// Then navigate back or success
// Go back
NavigationSto
浏览 1提问于2017-07-28得票数 4
回答已采纳
我读过，使用createStackNavigator作为组件类是可能的，我试图实现这一点，但我总是遇到一个错误。
而不是这个：
export default createStackNavigator({
Messages
}, {
defaultNavigationOptions: {
gesturesEnabled: false
}
})
我试过这个：
class MessagesStack extends React.Component {
render() {
const RouteConfigs = {
浏览 0提问于2019-05-24得票数 1
如何从app.js文件中设置所有导航栏的通用颜色，这里我们使用createStackNavigator作为导航我的app.js
import React, {Component} from 'react';
import { StyleSheet,} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Login from './src/pages/Login';
import SignUp from &#
浏览 0提问于2018-10-25得票数 0
和的区别是什么？
@ react导航/堆栈只适用于react应用程序，@react导航/本机堆栈仅用于for本机应用程序吗？
@react导航/堆栈- 301,111周下载
@react导航/本机-堆栈- 24,830周下载
import { createStackNavigator } from '@react-navigation/stack'
const Stack = createStackNavigator()
import { createNativeStackNavigator } from '@react-navigation/nativ
浏览 14提问于2021-09-05得票数 43
回答已采纳
这是我的文件，我已经确保安装了@react-导航/堆栈和@react-导航/本机。但我还是明白这个问题。我还在用世博会
import { createStackNavigator } from '@react-navigation/stack';
import { createAppContainer } from '@react-navigation/native';
import HomeScreen from '../pages/home';
import Disco
浏览 5提问于2022-03-22得票数 0
init之后，如果安装和导入任何其他依赖项，它将在运行“React -本机运行-ios”后显示此错误消息：
例如:我运行“react本机init RNProject”来创建简单的run本地项目。在此之后，我通过:"npm安装-保存-开发-导航--导航“安装createStackNavigator，然后在App.js中通过”从‘createStackNavigator’导入{createStackNavigator}“导入App.js，而什么也不做。运行后，“react本机运行-ios”并得到上面的错误。删除“导入{ createStackNavigator }从‘反应-导航’
浏览 4提问于2018-07-11得票数 0
回答已采纳
我的目标是从版本4-5中转换React本机堆栈导航器.我遇到了一些挑战，任何帮助都将不胜感激。
错误：“带有有效载荷的操作‘导航’{”名称“：”Auth“}没有被任何导航器处理。您有名为'Auth‘的屏幕吗?如果您试图导航到嵌套导航器中的屏幕，请参见。
Nav流:对用户进行身份验证(使用firebase)，然后转到包含已经功能良好的底部选项卡导航器的组件。加载屏幕->登录->在应用程序中注册-> (作为组件)。
这个导航器在app.jsx文件中，下面是代码。注意到：我注释掉了v4堆栈导航器，它们工作得很好。同样，我想将其转换为最新版本5。
import Re
浏览 2提问于2020-03-04得票数 2
回答已采纳
我试图勾勒出导航器的轮廓，但获取导航道具时丢失了错误。我已经添加了所有需要的包，遵循Net Ninja的教程，它也成功地导入了来自‘./screen/ Home’的主页；已经空白了
import 'react-native-gesture-handler';
import React, {useState} from 'react';
import * as Font from 'expo-font';
import Home from './screens/home';
import { AppLoading } from &#
浏览 1提问于2020-02-28得票数 0
1回答
例如，用于身份验证的此代码表单为react-navigation ：
import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.
const AppStack = createStackNavigator({ Home: HomeScreen, Other
浏览 0提问于2018-12-01得票数 1
回答已采纳
我正在尝试学习如何使用带有React的MobX，我不明白为什么使用提供程序或上下文是必要的，如果持有状态的对象从未改变，只更改其内容。
例如，我在store.js中有一个商店(一个随时间变化的简单计时器)：
import { decorate, observable, action } from 'mobx';
import React from 'react';
class TheTimer {
currentTick = 0; // In seconds since start
tick = () => {
this
浏览 1提问于2019-08-21得票数 26
我正在使用React导航文档中描述的身份验证流：
所以基本上，我有一个这样的SwitchNavigator：
import { createSwitchNavigator, createStackNavigator } from 'react-navigation';
// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.
const AppStack = createStackNavigator({ Home: HomeScreen, Other
浏览 1提问于2018-07-28得票数 2
需要帮助，请 尝试在版本为react的原生应用程序中使用mobx "react": "17.0.2",
"react-native": "0.65.1",
"mobx": "6.3.2",
"mobx-react": "7.2.0", App.js import { Provider } from "mobx-react";
import { AuthStore } from &
浏览 23提问于2021-08-26得票数 0
我正试图理解，以便在react本机的屏幕之间导航。
所以首先我创建了这样一个堆叠的视图
import { createStackNavigator } from 'react-navigation';
import Home from './home';
import CoinCapCharts from "./src/container/CoinCapCharts.js"
const screen = createStackNavigator({
Home: { screen: Home },
CoinCapCharts: { scr
浏览 1提问于2018-09-12得票数 0
1回答
我的导航堆栈只有一个文件。在我的导航头，我有一个菜单，我想打开一个抽屉。在这个例子中，我得到了错误：Cannot read property 'navigation' of undefined
我的AppNavigation文件：
import React from 'react';
import { Text } from 'react-native';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';
import
浏览 1提问于2018-11-09得票数 0
回答已采纳
在我的app.js文件中，我有一个导航器，我试图将它包装在一个redux商店中，以便在整个应用程序中控制状态。但是我收到了这个错误：
“不变冲突:此导航器缺少导航属性。在react-navigation v3和v4中，必须直接设置应用程序容器。”
我如何在Redux存储中正确包装我的导航器，以便可以使用它？
App.js
import React from 'react';
import { registerRootComponent } from 'expo';
import { View, Text, Button } from 'react-nat
浏览 13提问于2021-05-31得票数 0
我在一个屏幕上实现createMaterialTopTabNavigator，但是在我的应用程序中没有任何渲染。我返回MainNavigator，这是这个屏幕的应用程序容器。我是否在使用应用容器时犯了错误？如果是错误的话，那么请指导我如何在应用程序中同时使用抽屉导航器、底部导航器和顶级导航器来处理正确的流程。
应用程序流：
MainScreenNavigation > MainJobScreen >
MainScreenNavigation代码：
import React from "react";
import {createStackNavigator, cre
浏览 0提问于2019-01-29得票数 3
回答已采纳
1回答
我有一个嵌套的导航结构。
一个登录屏幕需要导航到配置文件屏幕，而配置文件需要导航到收件箱。就像这样，在-> Profile ->收件箱中注册。
Sing In
import React, {Component} from 'react';
import Profile from "../Profile";
class AppSignIn extends React.Component{
_doSignIn(){
this.props.navigation.navigate('Profile')
}
render(){
re
浏览 0提问于2019-05-19得票数 0
1回答
“错误:创建导航器不带参数。”
、、、、
我正尝试在react原生中为我的应用程序创建一个导航栏。在应用程序正常运行一天后，我打开了它，然后遇到了这个错误：“错误:创建导航器不需要参数。”我希望有人能帮助我，这样我就可以继续下去了。下面是我的代码： import React from "react";
import {Text, StyleSheet} from "react-native";
import {createAppContainer} from "@react-navigation/native";
import {createStackNavigator} from
浏览 18提问于2021-01-20得票数 1
我尝试为导航创建一个名为Navigate.js的特殊屏幕。这就是我所写的：
/**
* Navigate.js
*
* Root component of the app,
* responsible for setting up routes.
*
*/
// Libs
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer } from 'react-naviga
浏览 2提问于2020-03-26得票数 0
回答已采纳
在Mobx (mobx- React )中，我们可以在这样的React组件中“注入”存储：
@inject('store')
@observer class Abc extends React.Component {
}
这导致Abc将store作为类似于this.props.store的prop获得。但是inject如何将store映射到实际的商店呢？
浏览 0提问于2018-04-01得票数 1
回答已采纳
1回答
复杂反应导航状态
、、、
我想在我的React中使用React，但我不确定如何获得这个特定的功能：，其中有一个底部选项卡导航器，在每个选项卡屏幕中，在标题中有一个菜单按钮，打开一个抽屉导航器，而抽屉导航器中的每个选项都打开一个堆栈导航器(对于所有选项卡，即Home选项卡"For you“按钮打开的"For you”屏幕与“合并”选项卡等等)。
我尝试过stackNavigator、drawerNavigator和bottomTabNavigator的各种组合，但没有一种是明智的，或者至少是以我想要的方式。我做了一个基本的bottomTabNavigator，但是我不知道把drawerNavigator放
浏览 6提问于2019-10-20得票数 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
有了react导航4，我就可以从“react-导航”包导入和使用switchNavigator了。
import {
createAppContainer,
createSwitchNavigator,
createStackNavigator
} from "react-navigation";
import MainTabNavigator from "./MainTabNavigator";
import LoginScreen from "../screens/LoginScreen";
import AuthLoading
浏览 0提问于2020-02-25得票数 15
回答已采纳
1回答
我做了三个路线文件：
app.routes.js (拥有日志用户可以访问的路由)
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Dashboard from '../pages/Dashboard';
const AppStack = createStackNavigator();
const AppRoutes = () => (
<AppStack.Navigator
浏览 2提问于2020-08-20得票数 0
回答已采纳
我正在设置一个使用react-native-navigation的应用程序。我希望在导航中坚持一些值。当我大量触发导航时，我可以在对navigate的调用中将这些参数作为参数传递。但是，当我使用插件提供的本机导航时，我无法将其设置为参数。
在我的整个应用程序中共享API令牌的最佳方法是什么，而不需要将其存储在AsyncStorage中？我错过了什么明显的解决方案吗？
我的App.js：
const AppStack = createBottomTabNavigator({
Members: createStackNavigator({
MemberList: MemberList,
浏览 0提问于2019-01-07得票数 3
回答已采纳
这个应用程序在我测试过的多个Android设备上崩溃了。当我从欢迎屏幕转到一个只有webview标签的屏幕时，我点击返回欢迎屏幕，点击登录按钮，登录成功时有这个导航代码，在导航之前它崩溃了： const resetAction = CommonActions.reset({
index: 1,
routes: [{ name: 'primaryStack' }]
})
function login() {
.....
.....
if (success) navigation.dispatch(resetAction)
} 这是我在webview屏幕上的we
浏览 65提问于2021-09-12得票数 2
我目前正在尝试建立一个底部选项卡栏，并在标签内，每个导航堆栈与导航栏。我使用了以下基于react导航sample app的代码(只是在导入上做了一些小的修改，因为有些东西被移动了)。 遗憾的是，在iOS 13模拟器上，只有选项卡栏以深色模式显示(深灰色)，导航栏为白色。我怎样才能让它在深色模式下也能显示？ import React from 'react';
import { StyleSheet, View } from 'react-native';
import {
createAppContainer,
Themed,
} from '
浏览 22提问于2019-10-08得票数 3
回答已采纳
我一直在尝试通过学习本系列教程来学习React Native，但我仍然坚持使用react原生导航。https://www.youtube.com/watch?v=5uIftiPLsC4&list=PLYxzS__5yYQlHANFLwcsSzt3elIbYTG1h&index=21 在iPhone模拟器上，我得到了这个错误： (0, _reactNavigation.createStackNavigator) is not a function. (In '(0, _reactNavigation.createStackNavigator)({
home: A
浏览 14提问于2019-04-22得票数 1
回答已采纳
我的应用程序中有使用此库的统计组件： import {
LineChart,
BarChart,
PieChart,
ProgressChart,
ContributionGraph,
StackedBarChart
} from "react-native-chart-kit"; 当我将其设置为应用程序启动时加载的第一个页面时，该页面可以正常工作： import { createAppContainer } from "react-navigation";
import { createStackNavigat
浏览 12提问于2021-05-04得票数 1
1回答
我试图将图标分配给底部导航，但我已经创建了堆栈导航，并且我正在将它们渲染到底部导航。请帮帮我，因为我刚接触React Native。而且我不想使用createMaterialBottomNavigator import React from "react";
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from "react-navigation";
import { Icon } from "native-base";
import
浏览 19提问于2019-03-25得票数 0
在从顶级Tabnavigator导航到其他屏幕时，我遇到了一些问题，所以我的应用程序导航是
我的订单屏幕从抽屉=> Top TabNavigatore (接受/完成) => 订单详细信息
在Route.js中，我把我想要的每一个导航都放在抽屉-- Auth导航之类的地方，我把StackNavigator放在一个包含订单屏幕的屏幕上，如下所示：
const OrdersStack = createStackNavigator({
Orders: {
screen: Orders,
navigationOptions: ({ navigation }) =&
浏览 0提问于2019-07-12得票数 1
import React, {Component} from 'react';
import {View} from 'react-native';
import { createStackNavigator,createAppContainer } from 'react-navigation';
import Splash from './Components/Splash';
import MainScreen from './Components/MainScreen';
const BasedN
浏览 12提问于2019-09-11得票数 0
回答已采纳
1回答
下面的代码是我的主要导航。在Buzz中，我在标题中创建了一个图标，我想调用，将onPress中的屏幕设置为图标，但我不知道如何在主导航器中调用屏幕。我的所有其他屏幕都可以使用this.props.navigation.navigate，因为它在主导航中不被调用。
import React from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, TouchableOpacity} from 'react-native';
import {createSt
浏览 0提问于2020-02-24得票数 0
1回答
我读过许多关于在React中使用mobx的教程。我试图用存储逻辑在React本机中实现它，但是我的结果不是很好，我无法从存储中检索全局状态。
我的app.js
import React from 'react';
import {StyleSheet, View} from "react-native";
// import Search from './Components/Search';
import Navigation from './Navigation/Navigation';
import FilmStore f
浏览 1提问于2018-09-24得票数 2
回答已采纳
2回答
考虑以下示例：
import { AppRegistry } from "react-native";
import React, { Component } from "react";
import {
createSwitchNavigator,
createStackNavigator,
createBottomTabNavigator
} from "react-navigation";
import Icon from "react-native-vector-icons/Ionicons";
浏览 0提问于2018-08-27得票数 0
1回答
我有一个react本机应用程序，将react导航和redux分隔开来，所以我不会将导航属性传递给redux。我为Redux设置了一切，但我的状态似乎没有传递到Stacknavigator中的屏幕。
这是我的StackNav.js：
import { createStackNavigator } from 'react-navigation'
import { HomeScreen } from '../screens/HomeScreen'
export const RootStack = createStackNavigator(
{
浏览 1提问于2018-11-09得票数 0
回答已采纳
2回答
我有一个根StackNavigator，它有另外两个导航器1堆栈导航器(登录，注册)2标签导航器(主页，个人资料，设置)
那么，当用户登录成功时，我如何从rootNavigator切换到tabNavigator？
import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation'
import authNavi from './AuthRoute'; /// this is StackNavigator w
浏览 2提问于2019-03-28得票数 0
1回答
我正在尝试删除我的底部标签导航器，只为我的Content屏幕。这有没有可能。有人能帮帮我吗？我正在尝试从我的堆栈导航器中删除它。 这是我的代码： import React from 'react'
//React Navigation imports
import {createStackNavigator, TransitionPresets} from 'react-navigation-stack'
import {createBottomTabNavigator} from 'react-navigation-tabs'
import
浏览 4提问于2020-08-29得票数 0
当我决定使用redux和redux-saga时，我已经在使用react-native和redux-saga了。我的问题是我不知道如何在reducer或saga文件中导航。我找到了这个，但示例与我的入口文件(index.js)和顶级导航器(src/App.js，不确定这是否是顶级导航器)不同。
index.js (条目)
import React from "react";
import { Provider } from "react-redux";
import { AppRegistry } from 'react-native';
impo
浏览 1提问于2018-09-27得票数 0
我正在使用一个世博会应用程序，它与react原生导航捆绑在一起。
它工作得很好，我已经设置了几个堆叠的导航，但我似乎无法让我的模态显示底部的标签导航器。
导航文件夹结构如下：
以下是这些文件：
AppNavigator.js
import { createSwitchNavigator } from 'react-navigation'
import MainTabNavigator from './MainTabNavigator'
export default createSwitchNavigator({
Main: MainTabNav
浏览 0提问于2018-11-11得票数 0
1回答
我想访问一个在JSX文件中声明的对象(即MOBX对象)。我使用webpack将所有jsx文件打包到一个输出文件(bundle.js)中。但是我想访问包文件中的一些函数和对象。我们怎么能做到这一点？
我的webconfig.config.js
var webpack = require('webpack');
var path = require('path');
var buildDir = path.resolve(__dirname, './wwwroot/scripts');
var scriptsDir = path.resolve(_
浏览 1提问于2016-09-19得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
