ReactNative中AlertTextField监听键盘改变弹出位置

最新推荐文章于 2021-06-01 14:58:29 发布

WindFlyCloud

最新推荐文章于 2021-06-01 14:58:29 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactNative 文章标签： ReactNative Alert TextField 弹框输入框监听键盘

本文链接：https://blog.youkuaiyun.com/WindFlyCloud/article/details/79925386

ReactNative 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个基于 React Native 的自定义弹窗组件，该组件能够动态调整位置以适应键盘的弹出和隐藏，并提供了输入框等交互元素。文章详细展示了如何通过 Animated API 实现平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { Component } from 'react';
import { View, Text, Modal, StyleSheet, TextInput,TouchableOpacity , Dimensions, 
Alert,ScrollView,Keyboard,Animated,Easing} from 'react-native';

const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

export default class AlertTextField extends Component {

    constructor(props) {
        super(props);
        this.state = {
            nameString: this.props.title,
            KeyboardShown: true,
            topNumber: new Animated.Value(SCREEN_HEIGHT/2-180/2),
        }
        this.keyboardDidShowListener = null;
        this.keyboardDidHideListener = null;
    }
    componentWillMount() {
        //监听键盘弹出事件
        this.keyboardDidShowListener = Keyboard.addListener('keyboardWillShow',
          this.keyboardDidShowHandler.bind(this));
        //监听键盘隐藏事件
        this.keyboardDidHideListener = Keyboard.addListener('keyboardWillHide',
          this.keyboardDidHideHandler.bind(this));
    }
     
    componentWillUnmount() {
        //卸载键盘弹出事件监听
        if(this.keyboardDidShowListener != null) {
          this.keyboardDidShowListener.remove();
        }
        //卸载键盘隐藏事件监听
        if(this.keyboardDidHideListener != null) {
          this.keyboardDidHideListener.remove();
        }
    }
     
    //键盘弹出事件响应
    keyboardDidShowHandler(event) {
        // this.setState({KeyboardShown: true,});
        console.log(event.endCoordinates.height);
        console.log(event);
        this.startAnimation(true,event);
    }
     
    //键盘隐藏事件响应
    keyboardDidHideHandler(event) {
        // this.setState({KeyboardShown: false,});
        this.startAnimation(false,event);
        console.log('8888');
        console.log(event);
    }
    startAnimation(isShow,event) {

        if(isShow){//显示键盘
            this.state.topNumber.setValue(SCREEN_HEIGHT/2-180/2);
            Animated.timing(this.state.topNumber, {
                toValue: event.endCoordinates.screenY-180-5,
                duration: event.duration,
                // easing: Easing.step0,
            }).start();
        }else{
            this.state.topNumber.setValue(event.startCoordinates.screenY-180-5);
            Animated.timing(this.state.topNumber, {
                toValue: SCREEN_HEIGHT/2-180/2,
                duration: event.duration,
                // easing: Easing.step0,
            }).start();
        }
    }
    render() {
        let title = this.props.title != undefined ? this.props.title : '温馨提示';
        let centerView = this.getCenterView(title);
        return (
            <Modal
                animationType='fade'
                transparent={true}
                visible={this.props.modalVisible}
                onRequestClose={() => {

                }}>
                <View style={{ flex: 1,alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.3)', }}>
                <Animated.View style={[{alignItems: 'center',height:180,marginTop:this.state.topNumber}]}>
                    <View style={styles.bgView}>
                        <Text style={styles.title}>{title}</Text>
                        {centerView}
                        <View style={styles.bottomView}>
                            <TouchableOpacity onPress={() => {
                                if (this.props.cancleBtn != undefined) {
                                    this.props.cancleBtn();
                                }
                            }}>
                                <View style={styles.cancleBtn}>
                                    <Text style={{ fontSize: 17, color: '#333333' }}>取消</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {
                                if (this.props.confirmBtn != undefined) {
                                    if (this.props.title == '姓名') {
                                        if (this.state.nameString.length > 1) {
                                            this.props.confirmBtn(this.state.nameString, true);
                                            this.props.cancleBtn();
                                        } else {
                                            _toastView.show('姓名不能少于两个字', 2000);
                                        }
                                    }
                                }
                            }}>
                                <View style={styles.confirmBtn}>
                                    <Text style={{ color: '#fff', fontSize: 17, }}>确定</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Animated.View>
                </View>
            </Modal>
        );
    }


    getCenterView = (name) => {
        if (!name) return;
        if (name == '姓名') {
            return (
                <View style={styles.textInputView}>
                    <TextInput style={styles.textInput}
                        defaultValue={this.props.name}
                        autoFocus={true}
                        onChangeText={(text) => this.setState({ nameString: text })}
                        underlineColorAndroid="transparent"></TextInput>
                </View>
            );
        } 
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    bgView: {
        backgroundColor: '#fff',
        borderRadius: 14,
        justifyContent: 'center',
        alignItems: 'center',
        height: 180,
        width: 290,
    },
    title: {
        height: 58,
        fontSize: 17,
        lineHeight: 60,
    },

    textInputView: {
        height: 60,
        width: '80%',
    },

    textInput: {
        height: 44,
        borderColor: '#333333',
        borderRadius: 6,
        borderWidth: 1,
        padding: 10,
        fontSize: 17,
    },


    bottomView: {
        width: '80%',
        height: 60,
        justifyContent: 'space-between',
        flexDirection: 'row',
    },

    cancleBtn: {
        borderRadius: 6,
        borderWidth: 1,
        borderColor: '#dedede',
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#EEEEEE',
        width: 290 / 3,
    },

    confirmBtn: {
        borderRadius: 6,
        height: 40,
        justifyContent: 'center',
        backgroundColor: '#587BEB',
        alignItems: 'center',
        width: 290 / 3,
    },

    checkBoxView: {
        justifyContent: 'space-between',
        flexDirection: 'row',
    },

    textMan: {
        fontSize: 17,
        color: '#333333',
        marginLeft: 10,
    }


});

使用方法：

  <AlertTextField title={'姓名'} modalVisible={this.state.modalVisible}
                name={'测试'}
                cancleBtn={() => this.setState({ modalVisible: false })}
                confirmBtn={this.confirmBtn}/>

绑定的方法：

    confirmBtn = (pramasString, isName) => {
        if (isName) {//修改姓名
            console.log(pramasString);
            if (pramasString.length > 10) {
                _toastView.show("姓名长度过长", 3000);
                return;
            }
        }
        this.setState({ modalVisible: false })
    }