react native animated
程序员文章站
2024-01-14 16:30:40
...
一个简单的rn 淡入动画
自定义的component FadeInView
import React, {Component} from 'react';
import {Animated} from 'react-native';
class FadeInView extends Component {
constructor(props) {
super(props);
this.state = {
fadeAnim: new Animated.Value(0)
};
}
componentDidMount() {
Animated
.timing(this.state.fadeAnim, {
toValue: 1,
//5秒
duration: 5000
})
.start();
}
render() {
return (
<Animated.View
style={{
...this.props.style,
opacity: this.state.fadeAnim
}}>
{this.props.children}
</Animated.View>
);
}
}
//暴露组件
module.exports = FadeInView;
index.android.js 使用FadeInView
import React, {Component} from 'react';
import {
AppRegistry,
TouchableOpacity,
Text,
View,
StyleSheet,
Alert
} from 'react-native';
var FadeInView = require('./src/fadeview');
class MyButton extends Component {
_onPressButton() {
Alert.alert('demoproject', 'you have tap the button', {cancelable: true})
}
render() {
return (
<View style={styles.container}>
<FadeInView
style={{
width: 250,
height: 50,
backgroundColor: 'powderblue',
alignItems: 'center',
justifyContent: 'center'
}}>
<Text
style={{
fontSize: 28,
textAlign: 'center',
margin: 10
}}>Fading in</Text>
</FadeInView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
// 注册应用(registerComponent)后才能正确渲染 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
AppRegistry.registerComponent('DemoProject', () => MyButton);
上一篇: 网站总是被黑