我如何在react native中为一个组件设置两个marginBottom

Question

[我将通过animation.sequence运行动画，此动画中有两个marginBottom具有不同的值（对于一个组件），但本机会忽略第二marginBottom并始终运行第一个marginBottom。如何为一个组件设置两个具有不同值的marginBottom？

Answer 1

这是主要代码：我不能第二次设置marginBottom我该如何解决？

const ColorBox =()=>{

   const BaseballValue=new Animated.Value(0);
   const BaseballValue2=new Animated.Value(0);
   const BaseballValue3=new Animated.Value(0);
   const BallValue= new Animated.Value(0);
   const VericalValue= new Animated.Value(0);
   const HorizentalValue= new Animated.Value(0);
   const FallingValue=new Animated.Value(0);
   const LeftValue= new Animated.Value(0);
   const ClimbingValue= new Animated.Value(0);


useEffect(()=>{





  Animated.sequence([

    Animated.timing(BaseballValue,{
toValue:1,
duration:500,
easing:Easing.ease


    }),
     Animated.timing(BaseballValue3,{
     toValue:1,
     duration:400,
     easing:Easing.ease


     }),


    Animated.timing(BaseballValue2,{

    toValue:1,
    duration:400,
    easing:Easing.ease



    }),




   Animated.loop(
      Animated.sequence([
         Animated.timing(BallValue,{
            toValue:1,
            duration:800,


            }),


      ])
    )




  ]).start();



  Animated.sequence([

   Animated.timing(VericalValue,{

      toValue:1,
      delay:1700


    }),


   Animated.timing(HorizentalValue,{

   toValue:1,



   }),

   Animated.timing(FallingValue,{
   toValue:1


   }),

   Animated.timing(LeftValue,{
  toValue:1


   }),

   Animated.timing(ClimbingValue,{
      toValue:1


      }),




  ]).start();







})




const SpinBaseball=BaseballValue.interpolate({
inputRange:[0,1],
outputRange:['0deg','-90deg']


})


const BackwardBaseball=BaseballValue3.interpolate({
   inputRange:[0,1],
   outputRange:[0,-30]


})



const MovingBaseball=BaseballValue2.interpolate({
inputRange:[0,1],
outputRange:[0,210]


})


const SpinBall=BallValue.interpolate({
inputRange:[0,1],
outputRange:['0deg','360deg']

})


const MovingverticalBall=VericalValue.interpolate({

inputRange:[0,1],
outputRange:[0,250]


})


const HorizentalMove=HorizentalValue.interpolate({

inputRange:[0,1],
outputRange:[0,300]


})

const FallingBall=FallingValue.interpolate({
inputRange:[0,1],
outputRange:[0,1150]


})



const LeftMove=LeftValue.interpolate({

   inputRange:[0,1],
   outputRange:[0,630]

})


const ClimbingObject=ClimbingValue.interpolate({

inputRange:[0,1],
outputRange:[0,-900]

})





 return(

    <View>
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
   <Animated.Image
    source={require('.././images/ball.png')}

    style={{
       ...styles.ball, 
       transform:[{rotate:SpinBall}], 
       marginBottom:MovingverticalBall, 
       marginLeft:HorizentalMove, 
       marginTop:FallingBall, 
       marginRight:LeftMove, 








      }}

   >
   </Animated.Image>
   </View>
 <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>

  <Animated.Image
   source={require('.././images/baseball.png')}
   style={{...styles.baseball, transform:[{rotate:SpinBaseball},{translateX:BackwardBaseball}, {translateX:MovingBaseball}]}}
  >



  </Animated.Image>

 </View>

 </View>
 )


}

export default ColorBox;



const styles=StyleSheet.create({

   ball:{
   width:80,
   height:80

   },

baseball:{
   width:250,
   height:100,









}




})