【HarmonyOS】day45:RN_of_HarmonyOS实战项目_密码显示隐藏

【HarmonyOS】RN_of_HarmonyOS实战项目_密码显示隐藏

发布时间 ：2026年2月24日
技术栈：HarmonyOS + React Native

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

一、前言

在移动应用开发中，密码输入框的显示/隐藏功能 是一个常见且重要的交互需求。用户需要在输入密码时能够确认自己输入的内容是否正确，同时又需要在公共场合保护隐私。本文将基于 HarmonyOS 平台的 React Native 项目，详细讲解如何实现密码显示与隐藏的切换功能。

---

二、功能需求分析

功能点	描述
默认状态	密码以密文形式显示（●●●●）
切换功能	点击眼睛图标切换明文/密文显示
图标变化	显示时显示"睁眼"图标，隐藏时显示"闭眼"图标
用户体验	切换流畅，无延迟感

---

三、项目环境准备

3.1 环境要求

# Node.js 版本
node -v  # 建议 v18+

# npm/yarn
npm -v   # 建议 v9+

# HarmonyOS SDK
# 确保已安装 DevEco Studio 及对应 SDK

3.2 创建RN项目

# 使用@react-native-community/cli创建项目
npx @react-native-community/cli init PasswordToggleDemo

# 或使用HarmonyOS专用模板
npx react-native init PasswordToggleDemo --template @harmonyos/react-native-template

---

四、核心代码实现

4.1 基础组件结构

// components/PasswordInput.js
import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, StyleSheet, Image } from 'react-native';

const PasswordInput = ({ value, onChangeText, placeholder }) => {
  const [isPasswordVisible, setIsPasswordVisible] = useState(false);

  const togglePasswordVisibility = () => {
    setIsPasswordVisible(!isPasswordVisible);
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        secureTextEntry={!isPasswordVisible}
        autoCapitalize="none"
        autoCorrect={false}
      />
      <TouchableOpacity
        style={styles.iconButton}
        onPress={togglePasswordVisibility}
        activeOpacity={0.7}
      >
        <Image
          source={
            isPasswordVisible
              ? require('../assets/eye-open.png')
              : require('../assets/eye-close.png')
          }
          style={styles.icon}
        />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 12,
    backgroundColor: '#fff',
  },
  input: {
    flex: 1,
    height: 48,
    fontSize: 16,
    color: '#333',
  },
  iconButton: {
    padding: 8,
  },
  icon: {
    width: 24,
    height: 24,
    resizeMode: 'contain',
  },
});

export default PasswordInput;

4.2 使用示例

// App.js
import React, { useState } from 'react';
import { View, Text, StyleSheet, Button, Alert } from 'react-native';
import PasswordInput from './components/PasswordInput';

const App = () => {
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');

  const handleLogin = () => {
    if (password.length < 6) {
      Alert.alert('提示', '密码长度不能少于6位');
      return;
    }
    if (password !== confirmPassword) {
      Alert.alert('提示', '两次密码输入不一致');
      return;
    }
    Alert.alert('成功', '登录成功！');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>用户登录</Text>
      
      <PasswordInput
        value={password}
        onChangeText={setPassword}
        placeholder="请输入密码"
      />
      
      <PasswordInput
        value={confirmPassword}
        onChangeText={setConfirmPassword}
        placeholder="请确认密码"
      />
      
      <Button title="登录" onPress={handleLogin} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 30,
    color: '#333',
  },
});

export default App;

---

五、HarmonyOS 特性适配

5.1 使用系统图标

// 使用HarmonyOS系统图标库
import { Icon } from '@harmonyos/react-native-icons';

// 替换Image组件
<Icon
  name={isPasswordVisible ? 'eye' : 'eye-off'}
  size={24}
  color="#666"
/>

5.2 适配深色模式

import { useColorScheme } from 'react-native';

const colorScheme = useColorScheme();
const isDark = colorScheme === 'dark';

// 在样式中使用
const styles = StyleSheet.create({
  container: {
    backgroundColor: isDark ? '#1a1a1a' : '#fff',
    borderColor: isDark ? '#444' : '#ddd',
  },
  input: {
    color: isDark ? '#fff' : '#333',
  },
});

---

六、进阶优化

6.1 添加动画效果

import { Animated } from 'react-native';

// 在组件中添加
const opacity = useRef(new Animated.Value(1)).current;

const togglePasswordVisibility = () => {
  Animated.sequence([
    Animated.timing(opacity, {
      toValue: 0,
      duration: 100,
      useNativeDriver: true,
    }),
    Animated.timing(opacity, {
      toValue: 1,
      duration: 100,
      useNativeDriver: true,
    }),
  ]).start();
  setIsPasswordVisible(!isPasswordVisible);
};

6.2 安全性增强

// 密码自动清除（离开页面时）
useEffect(() => {
  return () => {
    setPassword('');
    setConfirmPassword('');
  };
}, []);

// 防止截图（HarmonyOS特有）
import { Security } from '@harmonyos/security';

useEffect(() => {
  Security.setScreenCaptureEnabled(false);
}, []);

---

七、常见问题及解决方案

问题	原因	解决方案
图标不显示	资源路径错误	检查图片路径，使用require正确引入
切换有延迟	状态更新问题	使用useNativeDriver优化动画
深色模式异常	样式未适配	使用useColorScheme动态获取主题
输入法遮挡	键盘弹出	使用KeyboardAvoidingView包裹

---

八、完整代码下载

# GitHub仓库
git clone https://github.com/harmonyos-rn/password-toggle-demo.git

# 安装依赖
cd password-toggle-demo
npm install

# 运行项目
npm run harmonyos

---

九、总结

本文详细介绍了在 HarmonyOS + React Native 项目中实现密码显示/隐藏功能的完整方案，包括：

1. ✅ 基础功能实现
2. ✅ HarmonyOS特性适配
3. ✅ 深色模式支持
4. ✅ 动画效果优化
5. ✅ 安全性增强

通过本教程，你可以快速在自己的项目中集成这一常见功能，提升用户体验。

---

十、参考资料

• HarmonyOS官方文档
• React Native官方文档
• RN_for_HarmonyOS GitHub仓库

---

💡 提示：本文代码基于2026年最新版本的HarmonyOS SDK和React Native，如有更新请以官方文档为准。
📢 欢迎交流：如有问题，欢迎在评论区留言讨论！

---