Вид без причины трясется на React Native iOS - PullRequest
Новая
       5

Вид без причины трясется на React Native iOS

0 голосов
/ 27 мая 2020

Я обнаружил странное поведение в разрабатываемом мной приложении RN. Очевидно, без всякой причины один из компонентов экрана начинает дрожать при обновлении sh приложения. Это происходит как на симуляторе iOS, так и на устройстве iPhone. Это не происходит каждый раз, когда я обновляю sh, но большую часть времени, и когда это происходит, симулятор перестает отвечать.

Вот что происходит в формате GIF: https://gph.is/g/EvAqBgg

Вот код экрана и компонента встряхивания:

Экран 

<Container>
      <SafeAreaView />
      <Header>
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <MaterialIcons name="menu" size={24} color="black" />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('Filter')}>
          <MaterialIcons name="search" size={24} color="black" />
        </TouchableOpacity>
      </Header>
      <FlatList
        data={products}
        renderItem={({ item }) => (
          <ProductItem
            product={item}
            onPress={() => navigation.navigate('Product', { product: item })}
          />
        )}
        keyExtractor={(item) => item.id}
        numColumns={2}
        ListEmptyComponent={() => <Text>No hay elementos</Text>}
        ListHeaderComponent={<HomeHeader />}
      ></FlatList>
      <ShoppingCartButton
        items={itemsInCart}
        onPress={() => navigation.navigate('ShoppingCart')}
        price={price}
      ></ShoppingCartButton>
    </Container>
  );
}

const Container = styled.View`
  flex: 1;
  align-items: center;
  justify-content: center;
  background-color: white;
`;

const Header = styled.View`
  width: 100%;
  height: 40px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  padding-right: 16px;
`;

Компонент встряхивания 

export default function ShoppingCartButton({ onPress, price, items }) {
  return (
    <ButtonArea>
      <Container onPress={onPress}>
        <CartIndicator>
          <CartQuantity>{items}</CartQuantity>
        </CartIndicator>
        <ButtonTitle>Ver carrito</ButtonTitle>
        <Price>{price} €</Price>
      </Container>
      <SafeAreaView />
    </ButtonArea>
  );
}

const ButtonArea = styled.View`
  width: 100%;
  padding: 16px;
  border-top-width: 1px;
  border-top-color: ${colors.separatorGrey};
  background-color: ${colors.white};
  box-shadow: 0px -4px 4px rgba(222, 222, 222, 0.2);
`;

const Container = styled.TouchableOpacity`
  height: 48px;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: ${colors.mainBlue};
  border-radius: 5px;
  padding-left: 16px;
  padding-right: 16px;
`;

const CartIndicator = styled.View`
  background-color: #2c81ab;
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 3px;
`;

const CartQuantity = styled.Text`
  font-family: 'Medium';
  color: ${colors.white};
`;

const ButtonTitle = styled.Text`
  font-family: 'Medium';
  color: ${colors.white};
`;

const Price = styled.Text`
  font-family: 'Book';
  color: ${colors.white};
`;
...