时间戳

首页 > 解决方案 > react-native 中的选项卡导航器上的映射视图未更新

react-native - react-native 中的选项卡导航器上的映射视图未更新

问题描述

我使用 tabnavigator 加载了 4 个选项卡。我有主页、收藏夹、购物车和个人资料屏幕。用户将在家中选择所需的产品，将其添加到购物车。选项卡上的徽章计数正在更新，但是当我进入购物车屏幕时，它仍然是空的。

我正在开发。因此，如果我在 VSCode 上刷新我的脚本，产品将显示在购物车屏幕上。

这是我的购物车脚本：-

renderProductList() {
  var contents = appGlobal.ObjProduct.map((item) => {
    return (
      <Content key={item.ProdID}>
        <TouchableOpacity onPress={() => {
          console.log('Touch item: ' + JSON.stringify(item));
        }}>
          <Card>
            <CardItem>
              <Left>
                <FastImage
                  source={{ uri: item.ProdImage, priority: FastImage.priority.normal, }}
                  style={{
                    width: 50,
                    height: 50,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                  resizeMode={FastImage.resizeMode.cover}
                />
              </Left>
              <Body>
                <Text>{item.ProdName}</Text>
              </Body>
              <Right>

              </Right>
            </CardItem>
          </Card>
        </TouchableOpacity>
      </Content>
    );
  });
  return (
    <Content padder>
      {contents}
    </Content>
  )
}
renderNoProduct() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
      <SvgUri width="150" height="150" source={EmptyCart} />
      <Text style={{ color: 'gray', marginTop: 10 }}>Your cart is empty :(</Text>
    </View>
  )
}
render() {
  return (
    <Container>
      <Header searchBar rounded>
        <Left style={{ flex: null }}>
        </Left>
        <Body style={{ flex: 3 }}>
          <Title style={{ marginLeft: 10, }}>Shopping Cart</Title>
        </Body>
        <Right style={{ flex: null }}>
        </Right>
      </Header>
      {appGlobal.ObjProduct.length > 0 ? this.renderProductList() : this.renderNoProduct()}
      <Footer>
        <FooterTab>
          <Button style={{ backgroundColor: '#d15f02' }}>
            <Text style={{ color: 'white' }}>Proceed to order</Text>
          </Button>
        </FooterTab>
      </Footer>
    </Container>
  );
}

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

使用选项卡导航器时，这是另一种实现全局映射或产品更改的方法吗？

标签： react-native

解决方案

当 TabNavigation 上的焦点屏幕发生变化时，您需要调用一个函数

在您的购物车标签上使用这个：

import { withNavigationFocus } from 'react-navigation';

class CartScreen extends React.Component {

    componentDidUpdate(prevProps) {
        if (prevProps.isFocused !== this.props.isFocused) {
             // Call any action to update you view
             //fetch data when the component is focused
             //To prevent extra component re-renders, you may need to write some logic in shouldComponentUpdate
            }
          }

    render() {
      return (
         <Container>
              <Text>{this.props.isFocused ? 'Focused' : 'Not focused'}</Text>
          </Container>
        );
     }
   }

  // withNavigationFocus returns a component that wraps CartScreen and passes
  // in the navigation prop

export default withNavigationFocus(CartScreen);

带导航焦点

withNavigationFocus是一个高阶组件，它将 isFocused 属性传递给一个包装的组件。如果您需要在屏幕组件的渲染功能或屏幕内某个位置渲染的另一个组件中使用焦点状态，这将非常有用。

推荐阅读