reactjs - 在 React Native 中淡入淡出

Question

我是 RN 的新手，并决定使用 Animated from 'react-native' 深入研究动画 这是我知道如何淡入和淡出元素的问题，但前提是我有 2 个按钮 我可以只按一个按钮吗？ ?

这是我的代码，它运行良好

import React from 'react'
import { Animated, View, Text, StyleSheet, Dimensions, Touchable, TouchableOpacity } from 'react-native'

const {width, height} = Dimensions.get('window')

export default function Amimated() {
  const value = React.useRef(new Animated.Value(0)).current

  const changeColor = ()=>{
    Animated.timing(value,{
      toValue: 1,
      duration: 1000, 
      useNativeDriver: true
    }).start()
  }

  const newStyle = {
    opacity: value
  }

  return (
    <View style={[styles.container]}>
      <Animated.View style={[styles.circle, newStyle]}>
      </Animated.View>
        <TouchableOpacity
          onPress={()=>changeColor()} 
          title="change"
          style={styles.btn}>
          <Text style={{color: 'white'}}>
            Change color
          </Text>
        </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container:{
    width,
    height,
    backgroundColor: 'red'
  },
  circle:{
    width: width / 4,
    height: width / 4,
    position: 'absolute',
    top: 100,
    backgroundColor: 'blue',
    marginHorizontal: width/4*1.5,
    borderRadius: 50
  },
  btn:{
    width: 100,
    position: 
    'absolute', 
    bottom: 100,
    left: width/4*1.5, 
    height:100, 
    display: 'flex', 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor: 'black'
  }
})

上例中的圆圈只出现

标签： reactjsreact-native