使用 redux 反应原生导航 v3
Posted
技术标签:
【中文标题】使用 redux 反应原生导航 v3【英文标题】:React Native navigation v3 with redux 【发布时间】:2019-05-19 16:09:04 【问题描述】:我正在尝试使用 redux 设置反应导航 v3。在反应导航文档中,我可以成功设置导航,并且无需添加 redux 即可正常工作。但是,当我尝试添加我的 redux class App extends React.Component...
并连接我的操作时,它会引发以下错误:
Invariant Violation:Invariant Violation:在“Connect(AuthScreen)”的上下文中找不到“store”。要么将根组件包装在 a 中,要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(AuthScreen),并将相应的 React 上下文消费者传递给。
App.js
const MainNavigator = createBottomTabNavigator(
welcome: screen: WelcomeScreen ,
auth: screen: AuthScreen ,
main:
screen: createBottomTabNavigator(
map: screen: MapScreen ,
deck: screen: DeckScreen ,
review:
screen: createStackNavigator(
review: screen: ReviewScreen ,
settings: screen: SettingsScreen
)
)
);
const AppContainer = createAppContainer(MainNavigator);
class App extends React.Component
render()
return (
<Provider store=store>
<AppContainer />
</Provider>
);
export default AppContainer;
这是我想将 redux 连接到的 AuthScreen:
class AuthScreen extends Component
componentDidMount()
console.log('This is this.props in AuthScreen:')
console.log(this.props);
this.props.facebookLogin();
render()
return(
<View>
<Text>AuthScreen</Text>
</View>
)
export default connect(null, actions)(AuthScreen);
我怀疑我不允许像这样在应用容器周围包裹<Provider>
标签,有人可以提供一些关于如何做到这一点的见解吗?
【问题讨论】:
【参考方案1】:这是一个简单的示例,可帮助您开始使用 React Navigation 3.x 和 Redux:
App.js
import React, Component from 'react';
import createStackNavigator, createAppContainer from 'react-navigation';
import Provider from 'react-redux';
import createStore, applyMiddleware from 'redux';
import Reducers from './src/Reducers';
import Preload from './src/screens/Preload';
let store = createStore(Reducers);
const AppNavigator = createStackNavigator(
Preload:
screen: Preload,
,
);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends Component
render ()
return (
<Provider store=store>
<AppContainer/>
</Provider>
)
【讨论】:
卢卡斯的回答很好。保持代码结构良好!【参考方案2】:所以,我会发布我所拥有的,希望它会有所帮助。我有一个单独的文件 (AppNavigation.js) 来处理我的应用程序的所有导航。在这个 AppNavigation 我有这个:
const RootNavigator = createStackNavigator(
<Code here>
)
我的 RootNavigator 在 AppContainer 内
const AppContainer = createAppContainer(RootNavigator)
然后,在我的课堂上渲染 AppContainer。
class AppNavigation extends Component
constructor(props)
super(props);
render()
return <AppContainer screenProps=this.props />
export default connect(mapStateToProps, mapDispatchToProps)(AppNavigation);
然后,在我的 App.js 上,我将我的商店“连接”到 RootNavigator
export default class App extends React.Component
render()
return (
<Provider store=store>
<RootNavigator />
</Provider>
)
所以,长话短说:您应该将 MainNavigator 包装在您的 Provider 标签上。
编辑:
const rootReducer = combineReducers(
reducer1,
reducer2,
reducer3...,
)
export default createStore(
rootReducer,
undefined,
applyMiddleware(...middleware)
)
因此,使用这些减速器,您可以通过 mapStateToProps 将它们“连接”到您的组件,并在它们上使用减速器的状态。
【讨论】:
等等,如果我想为另一个组件连接 redux 怎么办(更新代码)?我需要这条线export default connect(mapStateToProps, mapDispatchToProps)(AppNavigation);
吗?或者我可以export default AppNavigation
吗?
如果你想连接到另一个组件只需将该组件的reducer添加到你的商店,mapStateToProps和mapDispatchToProps仅用于组件的容器,以获得我需要的reducer的状态和调度员。我将使用连接到商店编辑我的答案
在没有此处描述的渲染方法(在 createAppContainer 的快速示例中)的情况下,渲染 appContainer 的意义何在? reactnavigation.org/docs/en/app-containers.html 这个例子也没有使用export default connect(mapStateToProps, mapDispatchToProps)(AppNavigation)
,所以我只是想知道这是否有必要?另外,您提到您在AppNavigation.js
中有您的RootNavigator,那么您是否将其导入回App.js
以包装在<Provider>
中?
我只渲染 appcontainer 因为我需要从 AppNavigation.js 传递道具给它。是的,我正在导入我的根导航器以包裹 以上是关于使用 redux 反应原生导航 v3的主要内容,如果未能解决你的问题,请参考以下文章