Блог

Я создал анимацию, и она анимируется, отлично!

Однако она не остается в своем контейнере. Обратите внимание, что она должна оставаться в желтом режиме просмотра

Вот GIF https://user-images.githubusercontent.com/7225808/55251949-0a826d00-5228-11e9-9c0a-8591d32756d5.gif

 render() {
return ([
    <View >
        <View style={style.arrow}>
        <Animatable.View 
        duration={3000} 
        style={style.arrow} 
        animation="slideInUp" 
        easing="ease-out" 
        iterationCount="infinite" 
        direction="alternate">
            <Image source={require('./ConnectArrow.png')} />
        </Animatable.View>
        </View>
    </View>,
    <View style={style.textView}>
        <Text style={style.textView}>Tap to Connect</Text>
    </View>
]);
}
}
  

     arrow: {
      alignItems: 'center',
      height: 30,
      marginTop: -10
    },
    textView: {
        alignItems: 'center',
        color: "#CCCCCC",
        fontSize: 18,
    }
  } 
  

вы сделали это очень хорошо с анимацией по умолчанию animation="slideInUp" , но для вашего требования, чтобы анимация была в режиме просмотра, вы должны сделать это с помощью пользовательской анимации.

Вы можете сделать это с помощью пользовательской анимации, вы можете установить анимацию так, как вы хотите. В этом случае вам нужно настроить анимацию в направлении Y в пределах желаемого диапазона.

Просто для справки.

 animation={{
      0: {
        translateY:20,
      },
      0.5: {
        translateY: 40,
      },[
      1: 
        translateY: 60,
      },
    }}
  

обратитесь к этому примеру

https://github.com/oblador/react-native-animatable/blob/master/Examples/MakeItRain/App.js