更改 redux 存储状态后导航到初始路由

时间:2020-12-25 10:09:04

标签: react-native react-redux react-navigation-v5

每当我尝试通过更改 redux 中的购物车状态将项目添加到我的购物车时,它都会将我导航到堆栈导航器中的初始路线“Home”。我试过在 redux 状态下存储导航参数,但它没有解决我的问题。

stack navigator 包含 3 页 Home->menu->detail 如果在菜单页面我将一些项目添加到 redux 状态,然后在添加后发送回主页面。

初始化堆栈导航器

const Homenavigator = ({ navigation, props }) => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          title: 'UrbanReach',
          headerStyle: { backgroundColor: '#7f89df' },
          headerTintColor: '#ffffff',
          headerRight: (color) => (
            <View style={{ right: 10, flexDirection: 'row', height: 32, bottom: 3 }}>
              <Avatar
                rounded
                icon={{ name: 'shopping-cart' }}
                size={'medium'}
                containerStyle={{ right: 10, bottom: 6 }}
                onPress={() => navigation.navigate('Cart')}
              />
              <Badge
                status="warning"
                containerStyle={{ position: 'absolute', left: 15 }}
                value={this.props.cart.cart.length}
                badgeStyle={{ width: 1, height: 18 }}
              />
            </View>
          ),
        }}
      />
      <Stack.Screen
        name="Search"
        component={Search}
        options={{
          headerStyle: { backgroundColor: '#7f89df' },
        }}
      />

      <Stack.Screen
        name="Menu"
        component={Menu}
        options={{
          headerStyle: { backgroundColor: '#7f89df' },
          headerRight: (color) => (
            <View style={{ right: 10, flexDirection: 'row', height: 32, bottom: 3 }}>
              <Avatar onPress={() => navigation.navigate('Cart')} />
            </View>
          ),
        }}
      />
      <Stack.Screen
        name="Dishdetail"
        component={Dishdetail}
        options={{
          title: 'Cart',
          headerStyle: { backgroundColor: '#7f89df' },
          headerRight: (color) => (
            <View style={{ right: 10, flexDirection: 'row', height: 32, bottom: 3 }}>
              <Avatar
                rounded
                icon={{ name: 'shopping-cart' }}
                size={'medium'}
                containerStyle={{ right: 10, bottom: 6 }}
                onPress={() => navigation.navigate('Cart')}
              />
            </View>
          ),
        }}
      />
    </Stack.Navigator>
  );
};
export const cart = (state = { errMess: null, isLoading: true, cart: [] }, action) => {
  switch (action.type) {
    case ActionTypes.POST_CART:
      return { ...state, errMess: null, isLoading: false, cart: [...state.cart, action.payload] };
    default:
      return state;
  }
};

0 个答案:

没有答案