Rename setTiming to applyAnimation
Summary:Given that you can do all kinds of animations other than `Animated.timing`, it made no sense to have `setTiming`. In addition, you can't intuitively tell that this is the callback where you would do custom animations. The discussion took place on Discord with ericvicenti: https://discordapp.com/channels/102860784329052160/154015578669973504 Closes https://github.com/facebook/react-native/pull/6235 Differential Revision: D2999121 Pulled By: hedgerwang fb-gh-sync-id: f587b865de11ba5e8dc9c430720252ffb5d12794 shipit-source-id: f587b865de11ba5e8dc9c430720252ffb5d12794
This commit is contained in:
Родитель
6470ff842b
Коммит
f2483eb1ee
|
@ -78,7 +78,7 @@ class NavigationAnimatedExample extends React.Component {
|
||||||
navigationState={navigationState}
|
navigationState={navigationState}
|
||||||
style={styles.animatedView}
|
style={styles.animatedView}
|
||||||
renderOverlay={this._renderHeader}
|
renderOverlay={this._renderHeader}
|
||||||
setTiming={(pos, navState) => {
|
applyAnimation={(pos, navState) => {
|
||||||
Animated.timing(pos, {toValue: navState.index, duration: 1000}).start();
|
Animated.timing(pos, {toValue: navState.index, duration: 1000}).start();
|
||||||
}}
|
}}
|
||||||
renderScene={this._renderCard}
|
renderScene={this._renderCard}
|
||||||
|
|
|
@ -77,16 +77,16 @@ const defaultProps = {
|
||||||
* A controlled navigation view that renders a list of cards.
|
* A controlled navigation view that renders a list of cards.
|
||||||
*/
|
*/
|
||||||
class NavigationCardStack extends React.Component {
|
class NavigationCardStack extends React.Component {
|
||||||
|
_applyAnimation: NavigationAnimationSetter;
|
||||||
_renderScene : NavigationSceneRenderer;
|
_renderScene : NavigationSceneRenderer;
|
||||||
_setTiming: NavigationAnimationSetter;
|
|
||||||
|
|
||||||
constructor(props: Props, context: any) {
|
constructor(props: Props, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillMount() {
|
componentWillMount(): void {
|
||||||
|
this._applyAnimation = this._applyAnimation.bind(this);
|
||||||
this._renderScene = this._renderScene.bind(this);
|
this._renderScene = this._renderScene.bind(this);
|
||||||
this._setTiming = this._setTiming.bind(this);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
shouldComponentUpdate(nextProps: Object, nextState: Object): boolean {
|
shouldComponentUpdate(nextProps: Object, nextState: Object): boolean {
|
||||||
|
@ -103,7 +103,7 @@ class NavigationCardStack extends React.Component {
|
||||||
navigationState={this.props.navigationState}
|
navigationState={this.props.navigationState}
|
||||||
renderOverlay={this.props.renderOverlay}
|
renderOverlay={this.props.renderOverlay}
|
||||||
renderScene={this._renderScene}
|
renderScene={this._renderScene}
|
||||||
setTiming={this._setTiming}
|
setTiming={this._applyAnimation}
|
||||||
style={[styles.animatedView, this.props.style]}
|
style={[styles.animatedView, this.props.style]}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -120,7 +120,7 @@ class NavigationCardStack extends React.Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
_setTiming(
|
_applyAnimation(
|
||||||
position: NavigationAnimatedValue,
|
position: NavigationAnimatedValue,
|
||||||
navigationState: NavigationParentState,
|
navigationState: NavigationParentState,
|
||||||
): void {
|
): void {
|
||||||
|
|
|
@ -63,12 +63,12 @@ function compareScenes(
|
||||||
}
|
}
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
applyAnimation: NavigationAnimationSetter,
|
||||||
navigationState: NavigationParentState,
|
navigationState: NavigationParentState,
|
||||||
onNavigate: (action: any) => void,
|
onNavigate: (action: any) => void,
|
||||||
renderScene: NavigationSceneRenderer,
|
|
||||||
renderOverlay: ?NavigationSceneRenderer,
|
renderOverlay: ?NavigationSceneRenderer,
|
||||||
|
renderScene: NavigationSceneRenderer,
|
||||||
style: any,
|
style: any,
|
||||||
setTiming: NavigationAnimationSetter,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -79,15 +79,15 @@ type State = {
|
||||||
const {PropTypes} = React;
|
const {PropTypes} = React;
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
|
applyAnimation: PropTypes.func,
|
||||||
navigationState: NavigationPropTypes.navigationState.isRequired,
|
navigationState: NavigationPropTypes.navigationState.isRequired,
|
||||||
onNavigate: PropTypes.func.isRequired,
|
onNavigate: PropTypes.func.isRequired,
|
||||||
renderScene: PropTypes.func.isRequired,
|
|
||||||
renderOverlay: PropTypes.func,
|
renderOverlay: PropTypes.func,
|
||||||
setTiming: PropTypes.func,
|
renderScene: PropTypes.func.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
setTiming: (
|
applyAnimation: (
|
||||||
position: NavigationAnimatedValue,
|
position: NavigationAnimatedValue,
|
||||||
navigationState: NavigationParentState,
|
navigationState: NavigationParentState,
|
||||||
) => {
|
) => {
|
||||||
|
@ -152,7 +152,7 @@ class NavigationAnimatedView
|
||||||
|
|
||||||
componentDidUpdate(lastProps: Props): void {
|
componentDidUpdate(lastProps: Props): void {
|
||||||
if (lastProps.navigationState.index !== this.props.navigationState.index) {
|
if (lastProps.navigationState.index !== this.props.navigationState.index) {
|
||||||
this.props.setTiming(
|
this.props.applyAnimation(
|
||||||
this.state.position,
|
this.state.position,
|
||||||
this.props.navigationState,
|
this.props.navigationState,
|
||||||
lastProps.navigationState
|
lastProps.navigationState
|
||||||
|
|
Загрузка…
Ссылка в новой задаче