Блог

Главная - Вопросы по программированию - Ошибка React Native при использовании динамического стиля в сочетании с useEffect

Ошибка React Native при использовании динамического стиля в сочетании с useEffect

#javascript #reactjs #react-native

#javascript #reactjs #react-native

Вопрос:

Ошибка, которую я получаю: [Инвариантное нарушение: [369,»RCTImageView»,31,{«source»:[{«__packager_asset»:true,»width»:52,»height»:80,»uri»:»…assets/assets/glass.png?platform=iosamp;hash=b11854c2a0e54026f26338d7c7cbf7fc?platform=iosamp;dev=trueamp;hot=falseamp;minify=false»,»scale»:1}],»width»:»<>»,»height»:»<>»,»overflow»:»hidden»,»marginTop»:4,»marginHorizontal»:»<>»,»ResizeMode»:»contain»}] не может использоваться в качестве аргумента собственного метода. Похоже, что width, height и marginHorizontal недоступны при рендеринге — я вычисляю эти значения на основе размера экрана, и ошибка исчезает, когда я удаляю динамический стиль. Эта ошибка возникает только при использовании useEffect. Я создаю динамический стиль, основанный на ширине контейнера:

  <View
   style={styles.container}
   onLayout={(event) => {
      setContainerWidth(event.nativeEvent.layout.width);
   }}
 >
   {glasses.map(() => glassContainer())}
 </View>

Это компонент, который использует динамический стиль.

 const ratio = 78 / 50;
const width = containerWidth / 12;

const glassContainer = () => (
    <View style={styles.singleGlassContainer}>
      <Image
        source={require("../../assets/glass.png")}
        style={[
          styles.glass,
          {
            width: width,
            height: width * ratio,
            marginHorizontal: containerWidth / 72,
          },
        ]}
        resizeMode="contain"
      />
    </View>
  );

Затем, наконец, я использую useEffect, как показано ниже

 useEffect(() => {
    renderGlasses();
  }, [hydrationTarget]);

Функция renderGlasses:

   const renderGlasses = () => {
    //Calculates amounth of glasses to reach target
    const targetGlasses = Math.ceil(hydrationTarget / glassVolume);
    for (let i = 0; i < targetGlasses; i  ) {
      setGlasses((prevArray) => [...prevArray, i]);
    }
  };

Я думаю, что что-то пошло не так, так это то, что useEffect срабатывает до вычисления динамического стиля, но здесь я могу ошибаться. Кто-нибудь знает, что вызывает ошибку, и как ее исправить? Если требуется какой-либо дополнительный код, пожалуйста, дайте мне знать.

Комментарии:

1. как вы получаете ширину контейнера? пробовал использовать useWindowDimensions?

2. @ErikDreifaldt Я использовал onLayout={(событие) => { setContainerWidth(событие.nativeEvent. планировка. ширина); }}

3. я предполагаю, что hydrationTarget является константой с useState? если это так, то использование hydrationTarget в качестве зависимости кажется избыточным, потому что в любом случае он будет повторно отображаться при изменении hydrationTarget. имеет ли стиль styles.glass какие-либо начальные значения для ширины и высоты?

4. hydrationTarget на данный момент все еще разрешен, и нет — я не дал никаких начальных значений, я постараюсь это сделать редактировать: указание начальных значений в объекте таблицы стилей не помогает