Back out "Remove deprecated lifecycles usage"
Summary: Changelog: [General][Changed] REVERT: createAnimatedComponent: removed deprecated lifecycles usage Original commit changeset: 04d016b30ae0 Reviewed By: JoshuaGross Differential Revision: D27053061 fbshipit-source-id: 6bb50da0a773070a979e7c52957a375b20c7c609
This commit is contained in:
Родитель
903351f22e
Коммит
6333c15fa2
|
@ -53,16 +53,8 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
|
|||
);
|
||||
|
||||
class AnimatedComponent extends React.Component<Object> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this._waitForUpdate();
|
||||
this._attachProps(this.props);
|
||||
this._lastProps = this.props;
|
||||
}
|
||||
|
||||
_component: any; // TODO T53738161: flow type this, and the whole file
|
||||
_invokeAnimatedPropsCallbackOnMount: boolean = false;
|
||||
_lastProps: Object;
|
||||
_prevComponent: any;
|
||||
_propsAnimated: AnimatedProps;
|
||||
_eventDetachers: Array<Function> = [];
|
||||
|
@ -182,6 +174,10 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
|
|||
_attachProps(nextProps) {
|
||||
const oldPropsAnimated = this._propsAnimated;
|
||||
|
||||
if (nextProps === oldPropsAnimated) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._propsAnimated = new AnimatedProps(
|
||||
nextProps,
|
||||
this._animatedPropsCallback,
|
||||
|
@ -223,11 +219,6 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
|
|||
});
|
||||
|
||||
render() {
|
||||
if (this._lastProps !== this.props) {
|
||||
this._waitForUpdate();
|
||||
this._attachProps(this.props);
|
||||
this._lastProps = this.props;
|
||||
}
|
||||
const {style = {}, ...props} = this._propsAnimated.__getValue() || {};
|
||||
const {style: passthruStyle = {}, ...passthruProps} =
|
||||
this.props.passthroughAnimatedPropExplicitValues || {};
|
||||
|
@ -272,6 +263,11 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
|
|||
);
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this._waitForUpdate();
|
||||
this._attachProps(this.props);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this._invokeAnimatedPropsCallbackOnMount) {
|
||||
this._invokeAnimatedPropsCallbackOnMount = false;
|
||||
|
@ -283,6 +279,11 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
|
|||
this._markUpdateComplete();
|
||||
}
|
||||
|
||||
UNSAFE_componentWillReceiveProps(newProps) {
|
||||
this._waitForUpdate();
|
||||
this._attachProps(newProps);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this._component !== this._prevComponent) {
|
||||
this._propsAnimated.setNativeView(this._component);
|
||||
|
|
|
@ -12,14 +12,7 @@
|
|||
|
||||
const RNTesterButton = require('../../components/RNTesterButton');
|
||||
const React = require('react');
|
||||
const {
|
||||
Animated,
|
||||
Easing,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} = require('react-native');
|
||||
const {Animated, Easing, StyleSheet, Text, View} = require('react-native');
|
||||
|
||||
import type {RNTesterExampleModuleItem} from '../../types/RNTesterTypes';
|
||||
|
||||
|
@ -90,17 +83,11 @@ exports.examples = ([
|
|||
}
|
||||
|
||||
type Props = $ReadOnly<{||}>;
|
||||
type State = {|
|
||||
disabled: boolean,
|
||||
pressCount: number,
|
||||
show: boolean,
|
||||
|};
|
||||
type State = {|show: boolean|};
|
||||
class FadeInExample extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
disabled: true,
|
||||
pressCount: 0,
|
||||
show: true,
|
||||
};
|
||||
}
|
||||
|
@ -110,35 +97,15 @@ exports.examples = ([
|
|||
<RNTesterButton
|
||||
testID="toggle-button"
|
||||
onPress={() => {
|
||||
this.setState(state => ({pressCount: 0, show: !state.show}));
|
||||
this.setState(state => ({show: !state.show}));
|
||||
}}>
|
||||
Press to {this.state.show ? 'Hide' : 'Show'}
|
||||
</RNTesterButton>
|
||||
<RNTesterButton
|
||||
testID="toggle-pressable"
|
||||
onPress={() => {
|
||||
this.setState(state => ({disabled: !state.disabled}));
|
||||
}}>
|
||||
Press to {this.state.disabled ? 'Enable' : 'Disable'}
|
||||
</RNTesterButton>
|
||||
{this.state.show && (
|
||||
<FadeInView>
|
||||
<Pressable
|
||||
testID="fade-in-view"
|
||||
style={styles.content}
|
||||
disabled={this.state.disabled}
|
||||
onPress={() => {
|
||||
this.setState(state => ({
|
||||
pressCount: this.state.pressCount + 1,
|
||||
}));
|
||||
}}>
|
||||
<Text>
|
||||
FadeInView
|
||||
{this.state.disabled
|
||||
? ''
|
||||
: ` Pressable: ${this.state.pressCount}`}
|
||||
</Text>
|
||||
</Pressable>
|
||||
<View testID="fade-in-view" style={styles.content}>
|
||||
<Text>FadeInView</Text>
|
||||
</View>
|
||||
</FadeInView>
|
||||
)}
|
||||
</View>
|
||||
|
|
Загрузка…
Ссылка в новой задаче