rn Animated.View使用

2,194 阅读1分钟
import {
  View,
  Text,
  StyleSheet,
  Animated,
  Easing,
  Image,
  TouchableOpacity,
  ScrollView,
  DeviceEventEmitter,
  Platform,
} from 'react-native';
   this.state = {
      anim: new Animated.Value(1),
    }
  startAnim = () => {
    this.props.setBottomVisible(!this.props.visible);
    Animated.timing(this.state.anim, {
      toValue: this.props.visible ? 0 : 1,
      duration: 200,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(() => {});
  };
  <Animated.View
        style={[
          styles.container,
          {
            bottom: 0,
            left: 0,
            transform: [
              {
                translateY: this.state.anim.interpolate({
                  inputRange: [0, 1],
                  outputRange: [UI.scaleSize(328), 0],
                }),
              },
            ],
          },
        ]}
      >
        <TouchableOpacity onPress={this.startAnim}>
          <Image
            source={visible ? downImg : upImg}
            style={{ height: UI.scaleSize(24) }}
            resizeMode="contain"
          />
        </TouchableOpacity>
      </Animated.View>
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    width: UI.size.deviceWidth,
    height: UI.scaleSize(352),
    alignItems: 'center',
  },
});