React Native UI 界面还原，组件布局与动画效果

<View style={styles.container}>    <Text style={styles.intro}>Hello world!</Text></View>

const styles = StyleSheet.create({  blueText: {    color: 'blue',    fontSize: 30,  }});

import React, { useRef, useEffect } from 'react';import { Animated, Text, View } from 'react-native';//在FadeInView的构造函数里，创建了一个名为fadeAnim的Animated.Value，并放在state中const FadeInView = (props) => {  const fadeAnim = useRef(new Animated.Value(0)).current  // 透明度初始值设为0  React.useEffect(() => {    Animated.timing(                  // 随时间变化而执行动画      fadeAnim,                       // 动画中的变量值      {        toValue: 1,                   // 透明度最终变为1，即完全不透明        duration: 10000,              // 让动画持续一段时间      }    ).start();                        // 开始执行动画  }, [fadeAnim])
  return (    <Animated.View                 // 使用专门的可动画化的View组件      style={{        ...props.style,        opacity: fadeAnim,         // 将透明度绑定到动画变量值      }}    >      {props.children}    </Animated.View>  );}// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了export default () => {  return (    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>      <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>        <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>      </FadeInView>    </View>  )}

Animated.timing(this.state.xPosition, {  toValue: 100,  easing: Easing.back(),  duration: 2000}).start();

Animated.sequence([  // decay, then spring to start and twirl  Animated.decay(position, {    // coast to a stop    velocity: { x: gestureState.vx, y: gestureState.vy }, // velocity from gesture release    deceleration: 0.997  }),  Animated.parallel([    // after decay, in parallel:    Animated.spring(position, {      toValue: { x: 0, y: 0 } // return to start    }),    Animated.timing(twirl, {      // and twirl      toValue: 360    })  ])]).start(); // start the sequence group

const a = new Animated.Value(1);const b = Animated.divide(1, a);
Animated.spring(a, {  toValue: 2}).start();

style={{    opacity: this.state.fadeAnim, // Binds directly    transform: [{      translateY: this.state.fadeAnim.interpolate({        inputRange:  [-300, -100, 0, 100, 101],        outputRange: [150, 0]  // 0 : 150, 0.5 : 75, 1 : 0      }),    }],  }}

Animated.spring(follower, { toValue: leader }).start();Animated.timing(opacity, {  toValue: pan.x.interpolate({    inputRange: [0, 300],    outputRange: [1, 0]  })}).start();

Animated.timing(this.state.animatedValue, {  toValue: 1,  duration: 500,  useNativeDriver: true // <-- 加上这一行}).start();

<Animated.ScrollView // <-- 使用可动画化的ScrollView组件  scrollEventThrottle={1} // <-- 设为1以确保滚动事件的触发频率足够密集  onScroll={Animated.event(    [      {        nativeEvent: {          contentOffset: { y: this.state.animatedValue }        }      }    ],    { useNativeDriver: true } // <-- 加上这一行  )}>  {content}</Animated.ScrollView>

// 在执行任何动画代码之前，比如在入口文件App.js中执行UIManager.setLayoutAnimationEnabledExperimental &&  UIManager.setLayoutAnimationEnabledExperimental(true);

import React from 'react';import {  NativeModules,  LayoutAnimation,  Text,  TouchableOpacity,  StyleSheet,  View,} from 'react-native';
const { UIManager } = NativeModules;
UIManager.setLayoutAnimationEnabledExperimental &&  UIManager.setLayoutAnimationEnabledExperimental(true);
export default class App extends React.Component {  state = {    w: 100,    h: 100,  };
  _onPress = () => {    // Animate the update    LayoutAnimation.spring();    this.setState({w: this.state.w + 15, h: this.state.h + 15})  }
  render() {    return (      <View style={styles.container}>        <View style={[styles.box, {width: this.state.w, height: this.state.h}]} />        <TouchableOpacity onPress={this._onPress}>          <View style={styles.button}>            <Text style={styles.buttonText}>Press me!</Text>          </View>        </TouchableOpacity>      </View>    );  }}
const styles = StyleSheet.create({  container: {    flex: 1,    alignItems: 'center',    justifyContent: 'center',  },  box: {    width: 200,    height: 200,    backgroundColor: 'red',  },  button: {    backgroundColor: 'black',    paddingHorizontal: 20,    paddingVertical: 15,    marginTop: 15,  },  buttonText: {    color: '#fff',    fontWeight: 'bold',  },});