Предотвращение повторного монтирования React Native ключевого компонента, который меняет иерархию (необходим для LayoutAnimation) - PullRequest
Новая
       19

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

0 голосов
/ 23 января 2019

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

Экран A: 

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

Экран B: 

<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,
        }}
      />
    );
  }
}
...