在 React-Native 应用中，如何使用 SwitchNavigator（react-navigator）和 react-redux？答案

【问题标题】：In a React-Native app, how to use SwitchNavigator (react-navigator) and react-redux?在 React-Native 应用中，如何使用 SwitchNavigator（react-navigator）和 react-redux？
【发布时间】：2018-08-28 03:35:29
【问题描述】：

我正在使用 react-navigation 的 SwitchNavigator 来根据身份验证状态管理我的导航。经过身份验证后，我想使用 Redux 来存储我正在获取的数据。

我的 SwitchNavigator 是这样的

SwitchRouteConfig = {
  AuthLoading: AuthLoadingScreen,
  Authenticated: AppStackNavigator,
  NotAuthenticated: AuthStackNavigator,
}

SwitchConfig = {
  initialRouteName: 'AuthLoading',
}

export default createSwitchNavigator(SwitchRouteConfig, SwitchConfig);

我的经过身份验证的导航如下所示：

// App Bottom Tab Navigator
const AppTabRouteConfig = {
  AddItem: { screen: AddItem },
  Items: { screen: Items },
  Map: { screen: Map },
  Help: { screen: Help },
}
const AppTabConfig = { initialRouteName: 'Items',}
const AppTabNavigator = new createBottomTabNavigator(
                     AppTabRouteConfig, 
                     AppTabConfig)

在我的屏幕中我们有：

class Items extends React.Component {
  constructor(props){
    super(props);
    this.state = {};
  }

  componentDidMount(){
    this.props.getData(); //call our redux action
  }

  render() {
  if(this.props.isLoading){
    return(
      <View>
        <ActivityIndicator />
      </View>
    )
    } else {
      return (
        <Provider store={store}>
          <SafeAreaView>
            <FlatList
              data={this.props.dataSource.features}
              renderItem={({ item }) =>
                <TouchableWithoutFeedback>
                  <View style={styles.listContainer}>
                    <Text>{item.prop1}</Text>
                    <Text>{item.prop2}</Text>
                  </View>
                </TouchableWithoutFeedback>
              }
            />
          </SafeAreaView>
        </Provider>
      )
  }
  }
}

function mapStateToProps(state, props) {
  return {
    isLoading: state.dataReducer.isLoading,
    dataSource: state.dataReducer.dataSource
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Actions, dispatch);
}

export default connect(mapStateToProps,
                       mapDispatchToProps)(Items)

当我没有通过身份验证时，它可以正常工作。我可以登录。当我通过身份验证时，我收到以下错误：

Invariant Violation: Could not find "store" 
in either the context or props of 
Connect(Items)". Either wrap the root 
component in a <Provider>, or explicitly pass 
"store" as a prop to "Connect(Items)".

在我今天完成的阅读中，所有示例都有一个顶级组件，它们用 .所以，我不明白你如何在没有那个模型的情况下实例化 store 和管理 Redux。

我还要提两件事：

在我开始实施 Redux 之前，经过身份验证的初始应用屏幕运行良好。
我不是想用 Redux 管理状态，只是应用程序数据。
项目从 Create-React-Native-App 开始。

谢谢！

【问题讨论】：

您的“根”组件在哪里？那是你应该渲染Providercomponent的地方
是的，我认为这也是我的问题......也许我做这一切都是错的。在我的应用程序中，我有项目、项目、地图项目的屏幕......项目和项目通过堆栈导航器工作，但它们是单独的屏幕（和文件）。我正在努力添加所有项目的地图视图，这导致我想要使用 Redux 来存储我在项目中获取的数据。但顶部没有 1 个组件，它都是屏幕和导航器。但根据我在 react-navigator 中看到的其他示例，这似乎是一种有效的方法。
你在哪里渲染SwichNavigator 组件？那是一个组件，只需将该组件包装在 Provider 中，一切都会按预期工作。
见上面的第一个代码块。 export default createSwitchNavigator(SwitchRouteConfig, SwitchConfig);
是的，我以为您没有使用 expo。我添加了一个适合你的答案。

标签： react-native react-redux react-navigation

【解决方案1】：

您必须将根组件（开关导航器）包装在 Provider 中，以使存储可用于所有容器组件。

const SwitchRouteConfig = {
  AuthLoading: AuthLoadingScreen,
  Authenticated: AppStackNavigator,
  NotAuthenticated: AuthStackNavigator,
}

const SwitchConfig = {
  initialRouteName: 'AuthLoading',
}

const Navigator = createSwitchNavigator(SwitchRouteConfig, SwitchConfig);


// You can use a stateless component here if you want
export default class Root extends React.PureComponent {
   render() {
     return (
        <Provider store={store}> 
           <Navigator />
        </Provider >
     );
   }

}

【讨论】：