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个技巧，希望与软件工程师们一起讨论，一起成长！