react-native实现搜索栏渐过渡动画

来源：互联网发布：小说地图制作软件编辑：程序博客网时间：2024/09/21 06:33
实现效果：
代码
import React, {Component} from 'react';import {    Animated,    Easing,    View,    StyleSheet,    TouchableOpacity,    TextInput} from 'react-native';var Dimenions = require('Dimensions');var Width = Dimenions.get('window').width;export default class Ours extends Component {    constructor() {        super();        this.animatedValue = new Animated.Value(0);        this.state = {            hidden: true,            currentAlpha: 0,            inputText: '',            placeholder: '',            opacity: 1,        }    }    Animate() {        this.state.currentAlpha = this.state.currentAlpha == 0 ? 1 : 0;//判断动画运动起止状态        this.setState({            opacity: 1        });        // this.animatedValue.setValue(0);        Animated.timing(            this.animatedValue,            {                toValue: this.state.currentAlpha,                duration: 300,                easing: Easing.linear            }        ).start();        if (this.state.currentAlpha == 0) {            this.refs.textInput.blur();            this.setState({                inputText: '',            });        }    }    //获取焦点    _Focus() {        this.refs.textInput.focus();    }    //提示文字消失    _Opacity(text) {        this.setState({            inputText: text,            opacity: 0        });    }    render() {        const ViewWidth = this.animatedValue.interpolate({            inputRange: [0, 1],            outputRange: [Width * 0.9, Width * 0.8]        });        const Opacity = this.animatedValue.interpolate({            inputRange: [0, 1],            outputRange: [0, 1]        });        const marginLeft = this.animatedValue.interpolate({            inputRange: [0, 1],            outputRange: [Width * 0.3, Width * 0.1]        });        return (            <View style={styles.container}>                <View style={styles.search}>                    <TouchableOpacity onPress={this.Animate.bind(this)} style={styles.image}>                        <Animated.Text style={{                            opacity: Opacity                        }}>取消</Animated.Text>                    </TouchableOpacity>                    <Animated.View                        style={{                            height: 35,                            width: ViewWidth,                            backgroundColor: '#efefef',                            position: 'absolute',                            top: 0,                            borderRadius: 10,                            left: 10                        }}                    />                    <TextInput style={styles.inputs}                               onFocus={this.Animate.bind(this)}                               underlineColorAndroid='transparent'                               // placeholder= "请输入搜索关键字"                               ref="textInput"                               onChangeText={this._Opacity.bind(this)}                               value={this.state.inputText}                    />                    <TouchableOpacity style={styles.ProText} onPress={this._Focus.bind(this)}>                        <Animated.Text style={{                            left: marginLeft,                            opacity: this.state.opacity                        }}>                            请输入搜索关键字                        </Animated.Text>                    </TouchableOpacity>                </View>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        position: 'relative',        top: 10    },    search: {        height: 35,        width: Width,        position: 'relative',        top: 0,    },    ProText: {        width: Width * 0.8,        position: 'absolute',        top: 6,        left: 0,    },    image: {        width: Width * 0.1,        height: Width * 0.1,        position: 'absolute',        top: 10,        right: Width * 0.035,    },    inputs: {        width: Width * 0.7,        height: 30,        borderWidth: 1,        paddingLeft: 5,        borderColor: '#efefef',        borderRadius: 4,        position: 'absolute',        left: Width * 0.05,        top: 4    },});
阅读全文
0 0