在React Native中创建一个很棒的页面动画组件的5个技巧

React Native 是Facebook早先于2015年4月开源的跨平台移动应用开发框架，是开源的JS框架 React 在原生移动应用平台的衍生产物。

目前支持iOS和安卓两大平台。

RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

在知力科技，软件技术工程师们也常常需要使用，并在实践中提炼和总结了在React Native中创建一个很棒的页面动画组件的5个技巧，一起来看下。

1：不要使用动画

在react-native中执行动画时，Animated是一个比较的低级API。但是，和所有低级API类似，它有点复杂，并且会产生大量不清晰的代码。

你的大部分动画都可以用LayoutAnimation和react-native- animatable制作。它们是更加高级的API和操作起来也更简单。我强烈建议您使用它们，您可以立即完成大部分任务。

2：为所有动画使用相同的组件

在两个不同的组件或页面上执行同一个变化是很难实现的。你也必须在他们之间复制一些代码。最简单的方法是改变组件某些部分的样式来为其设置动画效果。

页面变化的动画是这种的最大缺点。由于在您的router中不会有两个不同的页面，因此您将丢失后退按钮的处理。

3：使用相对定位

在React Native中没有fixed定位。在ListView中，不能用position: ‘absolute’, top: 0让组件移动到页面的顶部。当组件移动到ListView的顶部时，位置却不在您所滚动的位置。

你可以用measureInWindow来知道你的View在页面中的位置。例如 ：

 

class MyComponent  extends Component {

onPress() {

this.props.onPress();

this.refs.container.measureInWindow((x, y) => this.setState({

windowPos: { x, y },

}));

};

 

render() {

const containerPos = this.state.windowPos ? {

position: ‘relative’,

top: – this.state.windowPos.y + appStyle.navbar.height,

} : {};

 

return (

<TouchableWithoutFeedback onPress={this.onPress}>

<View style={[styles.container, containerPos]} ref=”container”>

{content}

</View>

</TouchableWithoutFeedback>

);

}

}

4：让父组件知道动画

当你开始执行列表上的一个元素的动画时，ListView需要知道状态的变化。您将不得不淡出所有其他元素并禁用滚动。不要忘记接受父组件onAnimationStart或onPress的回调。

5：处理退出动画

你正在执行的动画可能很棒，但不要忘记正在退出的动画！请注意，如果在退出期间删除多余的元素，则无法在LayoutAnimation之外为其设置动画效果。

在我的示例中，我等待LayoutAnimation的结尾后隐藏了底部文本。由于这个原因，我可以使用react-native-animatable退出动画。

class TvShowListItem extends Component {

componentWillUpdate() {

const animation = LayoutAnimation.create(500, ‘easeInEaseOut’, ‘opacity’);

LayoutAnimation.configureNext(animation, () => this.setState({ exitEnded: true }));

}

onPress() {

if (this.state.opened) {

this.refs.description.fadeOutDownBig();

return  this.setState({opened: false,  exitEnded: false});

}

this.setState({ opened: true });

};

render() {

const { opened, exitEnded } = this.state;

return (

<TouchableWithoutFeedback onPress={this.onPress}>

<View style={[styles.container, containerPos]} ref=”container” >

{ content }

{ (opened || ! exitEnded) && (

<Animatable.View

animation=”fadeInUpBig”

style={styles.description}

duration={800}

ref=”description”

delay={400}

>

<Text style={styles.descriptionText}>{this.props.tvShow.overview}</Text>

</Animatable.View>

)}

</View>

</TouchableWithoutFeedback>

);

}

}

总结：

以上就是在React-native中如何制作一个很好的组件来展示页面动画的5个技巧，希望与软件工程师们一起讨论，一起成长！