import React from 'react';
import { View, TouchableOpacity, StyleSheet, Button, Text, NativeModules, Image } from 'react-native';
import { connect } from 'react-redux'
import { Icon } from 'native-base';
const ShoppingCartIcon = (props) => (
<View>
<View style={{
position: 'absolute', height: 30, width: 30,
borderRadius: 15, backgroundColor: 'rgba(95,197,123,0.8)', right: 45,
bottom: 15, alignItems: 'center', justifyContent: 'center', zIndex: 2000
}}>
<Text stye={{ color: 'white' }}> {props.cartItems.length} </Text>
</View>
<Icon name="cart" ></Icon>
<Button style={styles.but}
title="Add"
onPress={() => {
this.props.navigation.navigate('ShopScreen');
this.props.navigation.closeDrawer();
}}
/>
</View>
)
const mapStateToProps = (state) => {
return {
cartItems: state
}
}
export default connect(mapStateToProps)(ShoppingCartIcon);
const styles = StyleSheet.create({
but: {
justifyContent: 'center',
alignItems: 'center',
fontSize: 20,
//justifyContent: 'flex-end',
//textAlign: 'center',
//flexDirection:'column',
}
})
我正在尝试使用 redux,但出现此错误:在“Connect(ShoppingCartIcon)”的上下文中找不到“store”。要么将根组件包装在 a 中,要么将自定义的 React 上下文提供程序传递给连接选项中的 Connect(ShoppingCartIcon),并将相应的 React 上下文使用者传递给 Connect(ShoppingCartIcon)。
似乎问题在于我将抽屉容器屏幕包装在提供程序中,但我不知道如何解决它。
谢谢你的帮助
import React, { Component } from 'react';
import { View, Text, Button, StyleSheet, Image, Platform, TextInput, ScrollView, Title } from 'react-native';
import DrawSt from './App.js'
import { Provider } from 'react-redux'
import store from './store'
//import { NavigationContainer } from '@react-navigation/native'
export default class Start extends React.Component {
render() {
return (
<Provider store={store}>
<DrawSt />
</Provider>
)
}
}
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {Icon} from 'react-native-elements';
import {Platform, TouchableOpacity, View, Text} from 'react-native';
import DrawerContainer from './src/screens/DrawerContainer.js'
import { createDrawerNavigator } from 'react-navigation-drawer';
const RootStack = createStackNavigator({
HomeScreen: {
screen:Home,
navigationOptions:{
headerTitle:"Home",
headerTitleStyle:{
alignSelf:'center',
textAlign:'center',
flex:2,
padding: 116.5,
textAlignVertical:'center',
justifyContent:'center',
marginBottom:Platform.OS==='ios'?30:null,
},
}
},
HomeLoginScreen: {
screen: HomeLogin,
navigationOptions: ({navigation})=>({
headerRight: (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={30} />
</TouchableOpacity>
),
headerTitleStyle:{
alignSelf:'center',
textAlign:'center',
flex:2,
padding: 70,
textAlignVertical:'center',
justifyContent:'center',
marginBottom:Platform.OS==='ios'?30:null,
},
})
},
MilkScreen:{
screen: milk,
navigationOptions:{
headerRight: (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon name="menu" size={30} />
</TouchableOpacity>
),
headerTitleStyle:{
alignSelf:'center',
textAlign:'center',
flex:2,
padding: 116.5,
textAlignVertical:'center',
justifyContent:'center',
marginBottom:Platform.OS==='ios'?30:null,
},
}
},
DrinkScreen:{
screen: drinks,
navigationOptions:{
headerTitleStyle:{
alignSelf:'center',
textAlign:'center',
flex:2,
padding: 70,
textAlignVertical:'center',
justifyContent:'center',
marginBottom:Platform.OS==='ios'?30:null,
},
}
},
//and others
},
{
initialRouteName: 'HomeScreen',
},
);
const DrawerStack = createDrawerNavigator(
{
Main:RootStack
},
{
drawerPosition: 'left',
initialRouteName: 'Main',
drawerWidth: 250,
contentComponent: DrawerContainer
}
)
DrawSt = createAppContainer(DrawerStack)
export default DrawSt;
在“Connect(ShoppingCartIcon)”的上下文中找不到“商店”。要么将根组件包装在 a 中,要么将自定义的 React 上下文提供程序传递给连接选项中的 Connect(ShoppingCartIcon),并将相应的 React 上下文使用者传递给 Connect(ShoppingCartIcon)。
最佳答案
你应该提供给<Provider store={store}>
像这样存储
import { createStore } from "redux";
import reducer from '.store/reducer'
const store = createStore(reducer);
关于javascript - 在连接上下文中找不到 "store",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61524112/