• 技术文章 >web前端 >前端问答

    react怎么实现密码隐藏功能

    藏色散人藏色散人2023-01-04 16:47:22原创140

    react实现密码隐藏功能的方法:1、添加依赖“import {View,Text,TouchableWithoutFeedback,TextInput,Image,StyleSheet,} from 'react-native';”;2、通过“{this.state.imageState ? (...)}”方法实现密码显示与隐藏功能即可。

    本教程操作环境:Windows10系统、React Native0.67版、Dell G3电脑。

    react怎么实现密码隐藏功能?

    React Native 密码输入的显示与隐藏 Image点击事件 眼睛 输入框密码

    1.效果图

    e16f021caf803823bb80f8efad8f930.jpg

    3442770521cc9bd37fae6b623f9b783.jpg

    2.添加依赖

    import {
      View,
      Text,
      TouchableWithoutFeedback,
      TextInput,
      Image,
      StyleSheet,
    } from 'react-native';

    3.代码功能实现

    export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          imageState: false,
        };
      }
      render() {
        return (
          <View style={{ flex: 1, justifyContent: 'space-around' }}>
            <View
              style={{ backgroundColor: '#ffffff', height: 50, flexDirection: 'row', justifyContent: 'space-between', marginTop: 1, }}>
              <Text style={pageStyle.textStyle}>请输入密码:</Text>
              <TextInput
                secureTextEntry={!this.state.imageState}//是否隐藏
                editable={true}//是否可编辑
                style={pageStyle.textInfoStyle}>
                test12345test
              </TextInput>
              <TouchableWithoutFeedback style={{ marginRight: 10 }} onPress={this.onPressChang}>
                {this.state.imageState ? (
                  <Image style={{ width: 21, height: 14, alignSelf: 'center', marginRight: 10, }}
                    source={require('../ReactDemo1/android/app/src/main/res/mipmap-xhdpi/password_show.png')}
                  />) : (<Image style={{ width: 20, height: 8, alignSelf: 'center', marginRight: 10, }}
                    source={require('../ReactDemo1/android/app/src/main/res/mipmap-xhdpi/password_hide.png')}
                  />)}
              </TouchableWithoutFeedback>
            </View>
          </View>
        );
      }
      onPressChang = () => {
        this.setState({
          imageState: !this.state.imageState,
        });
      };
    }
    const pageStyle = StyleSheet.create({
      textInfoStyle: {
        alignSelf: 'center',
        marginLeft: 40,
        color: '#343434',
        fontSize: 16,
        flex: 1,
      },
      textStyle: {
        alignSelf: 'center',
        marginLeft: 10,
        color: '#343434',
        fontSize: 16,
      },
    });

    推荐学习:《react视频教程

    以上就是react怎么实现密码隐藏功能的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:密码 React
    上一篇:es6怎么查找某项是否存在 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react报错页面空白怎么解决• react有什么特点• react怎么取消右键• react路由有哪些• react引入css没有效果怎么办
    1/1

    PHP中文网