реагировать родной: обновления состояния не влияют на преобразование

Question

Я хочу иметь компонент, который становится больше при нажатии и становится меньше при отпускании. Я пытаюсь использовать обработчики onPressIn и onPressOut для обновления состояния, которое обновляет значение преобразования:

const ExampleScreen = () => {
  const [pressed, setPressed] = useState(false);
  const scale = pressed === true ? 2 : 1;
  console.log('rendering with scale ', scale);
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <TouchableWithoutFeedback
        onPressIn={() => setPressed(true)}
          onPressOut={() => setPressed(false)}>
        <View
          style={[
            {
              backgroundColor: 'lightblue',
              width: 100,
              height: 100,
            },
            {transform: [{scale: scale}]},
          ]}>
          <Text>Press me</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};

Я вижу в консоли, что состояние изменяется:

[Thu Jun 18 2020 19:36:14.483]  LOG      rendering with scale  1
[Thu Jun 18 2020 19:36:14.780]  LOG      rendering with scale  2
[Thu Jun 18 2020 19:36:15.124]  LOG      rendering with scale  1

но квадрат на экране не меняет своего масштаба. Почему это так и как это исправить?

Answer 1

Попробуйте это!

Поместите этот код за пределы вашего компонента вот так

if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

const ExampleScreen = () => {/* your component */}

Затем добавьте это прямо перед обновлением состояния:

LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

//Example
<TouchableWithoutFeedback
        onPressIn={() => { 
                    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
                    setPressed(true);
                  }}>

Для получения дополнительной информации информация о LayoutAnimation go здесь: LayoutAnimation