使用 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);

我怀疑我不允许像这样在应用容器周围包裹&lt;Provider&gt; 标签,有人可以提供一些关于如何做到这一点的见解吗?

【问题讨论】:

【参考方案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 以包装在&lt;Provider&gt; 中? 我只渲染 appcontainer 因为我需要从 AppNavigation.js 传递道具给它。是的,我正在导入我的根导航器以包裹 .. mapStateToProps和 mapDispatchToProps 被使用是因为我的应用程序中有 redux,但你可以使用 mapDispatchToProps ,在 react-native 中让你的组件只做组件做的事情是一个很好的做法,而你的所有其他功能都将在你的调度中拥有跨度> 如何访问 RootNavigator 中的 screenProps?

以上是关于使用 redux 反应原生导航 v3的主要内容,如果未能解决你的问题,请参考以下文章

我可以在单反应原生项目中同时使用 redux 和 Flux 吗?

使用 redux 反应原生路由:错误:期望减速器是一个函数

反应原生 redux-persist 切片

反应原生redux连接未定义的功能

反应原生 Flatlist 导航

反应原生导航在屏幕之间移动