密码的隐藏功能, react怎么实现?
发布时间：2023-07-05 11:21:19 所属栏目：教程 来源：互联网
导读： 这篇文章主要讲解了“react如何实现密码隐藏功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react如何实现密
|
这篇文章主要讲解了“react如何实现密码隐藏功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“react如何实现密码隐藏功能”吧！ react实现密码隐藏功能的方法：1、添加依赖“import {View,Text,TouchableWithoutFeedback,TextInput,Image,StyleSheet,} from 'react-native';”；2、通过“{this.state.imageState ? (...)}”方法实现密码显示与隐藏功能即可。 React Native 密码输入的显示与隐藏 Image点击事件 眼睛 输入框密码 1.效果图 react如何实现密码隐藏功能 react如何实现密码隐藏功能 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, }, }); （编辑：广西网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
