Запретить 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,
}}
/>
);
}
}