Это то, что я хотел бы создать, фактический импульс с анимацией изображения.
Это то, что мне удалось создать.
Толькоэто не убеждает меня в результате, который мне удалось получить.
Я бы хотел, чтобы на изображении была анимация.
Я не понимаю, что не убеждает меня в результатеизображение.
Код:
import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import { Constants } from 'expo';
import { LinearGradient } from 'expo';
import PulseAnim from 'react-native-pulse-anim';
var size = 60;
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image
style={{
width: 70,
height: 70,
borderRadius: 35,
marginBottom: 20,
}}
source={{
uri:
'https://vignette.wikia.nocookie.net/spooks/images/8/83/Lara_Pulve.jpg/revision/latest?cb=20111224003538',
}}
/>
<LinearGradient
height={size}
width={size}
colors={['#8a49a1', '#8a49a1']}
rotation={0}
style={{
justifyContent: 'center',
alignItems: 'center',
borderRadius: 40,
}}>
<LinearGradient
height={size - 4}
width={size - 4}
colors={['#fff', '#fff']}
rotation={0}
style={{
justifyContent: 'center',
alignItems: 'center',
borderRadius: 45,
}}>
<LinearGradient
height={size - 8}
width={size - 8}
colors={['#000', '#000']}
rotation={0}
style={{
justifyContent: 'center',
alignItems: 'center',
borderRadius: 45,
}}>
<PulseAnim
size={size - 20}
pulseMaxSize={size}
avatar={
'https://vignette.wikia.nocookie.net/spooks/images/8/83/Lara_Pulve.jpg/revision/latest?cb=20111224003538'
}
/>
</LinearGradient>
</LinearGradient>
</LinearGradient>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#000',
padding: 8,
alignItems: 'center',
},
});
Ссылка: Здесь
ЕстьКто-нибудь знает, как улучшить мой пульс, как делает Instagram?