Запретить React Native повторно монтировать ключевой компонент, который меняет иерархию (необходим для LayoutAnimation)

У меня есть два "экрана" - экран A и экран B. Экран A имеет <RedBox key='thing' /> в теме. Экран B имеет тот же компонент, но обернут в <View>,

Экран А:

<RedBox key='thing' size={100} />

Экран Б:

<View>
   <RedBox key='thing' size={200} />
</View>

Экран A и экран B заменяются простым изменением состояния.

Похоже, что хотя <RedBox /> имеет тот же ключ, он считается другим компонентом из-за его иерархии. Есть ли способ заставить RN считать их одним и тем же компонентом, а не перерисовывать?

Я пытаюсь использовать LayoutAnimation, но он только анимирует компоненты, которые он считает одинаковыми от рендеринга до рендеринга.

https://snack.expo.io/@nathanziarek/thing-tester

import * as React from 'react';
import { Text, View, TouchableOpacity, LayoutAnimation } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.PureComponent {
  state = {
    toggle: true,
  };
  render() {
    return (
      <View style={{ marginTop: 200, flex: 1 }}>
        <TouchableOpacity
          onPress={() => {
            LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
            this.setState({ toggle: !this.state.toggle });
          }}>
          <Text>TAP HERE</Text>
        </TouchableOpacity>
        <Text>Will not animate...</Text>
        {this.state.toggle ? (
          <View>
            <Thing size={100} key="thing" />
          </View>
        ) : (
          <Thing size={200} key="thing" />
        )}

        <Text>Will animate...</Text>

        {this.state.toggle ? (
            <Thing size={100} key="thing2" />
        ) : (
          <Thing size={200} key="thing2" />
        )}
        
      </View>
    );
  }
}

class Thing extends React.PureComponent {
  componentDidMount() {
    console.log('componentDidMount', this.props.size);
  }
  componentDidUnmount() {
    console.log('componentDidUnmount', this.props.size);
  }
  render() {
    return (
      <View
        style={{
          backgroundColor: 'red',
          width: this.props.size,
          height: this.props.size,
        }}
      />
    );
  }
}

0 ответов

Другие вопросы по тегам