RN for OpenHarmony英雄联盟助手App实战：关于实现

案例开源地址：https://atomgit.com/nutpi/rn_openharmony_lol

关于页面是 App 的"名片"，它告诉用户这个 App 是什么、由谁开发、数据从哪来。虽然用户不会经常访问这个页面，但它对于建立信任、展示专业性、以及满足法律合规要求都很重要。

这篇文章我们来实现关于页面，重点讨论品牌展示 的设计、信息卡片 的布局、以及免责声明的必要性。

关于页面应该包含什么

一个完整的关于页面通常包含以下信息：

信息类型	内容示例	必要性
App 标识	Logo、名称、版本号	必须
功能介绍	App 是做什么的	推荐
数据来源	数据从哪里获取	推荐
免责声明	版权归属、使用限制	必须
联系方式	反馈邮箱、官网链接	推荐
开发者信息	开发团队、公司名称	可选

为什么免责声明是必须的？

我们的 App 使用了 Riot Games 的游戏数据和商标（英雄联盟、LOL 等）。虽然 Riot 提供了公开的 Data Dragon API，但我们仍需要声明：

这不是官方 App
商标归原公司所有
仅供学习交流使用

这可以避免法律风险，也是对原版权方的尊重。

组件结构概览

tsx 复制代码

import React from 'react';
import {View, Text, ScrollView, StyleSheet, Linking} from 'react-native';
import {colors} from '../../styles/colors';

export function AboutPage() {
  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
      <View style={styles.header}>
        {/* App 标识区域 */}
      </View>
      <View style={styles.card}>
        {/* 关于应用 */}
      </View>
      <View style={styles.card}>
        {/* 数据来源 */}
      </View>
      <View style={styles.card}>
        {/* 免责声明 */}
      </View>
      <View style={styles.footer}>
        {/* 页脚 */}
      </View>
    </ScrollView>
  );
}

页面结构非常清晰：头部 + 多个信息卡片 + 页脚。这种结构在关于页面中很常见，用户一眼就能理解页面的组织方式。

导入 Linking 的用途：

虽然当前代码没有使用 Linking，但它被导入了，说明原本计划添加外部链接功能（比如跳转到官网、打开邮件客户端等）。我们后面会讨论如何实现。

头部品牌展示

tsx 复制代码

      <View style={styles.header}>
        <Text style={styles.logo}>🎮</Text>
        <Text style={styles.appName}>LOL 助手</Text>
        <Text style={styles.version}>版本 1.0.0</Text>
      </View>

头部是关于页面的视觉焦点，包含三个元素：

Logo（🎮）：

用 Emoji 作为临时 Logo 是一个务实的选择。在正式项目中，应该替换成真正的 App 图标：

tsx 复制代码

<Image source={require('../../assets/logo.png')} style={styles.logo} />

App 名称：

"LOL 助手"用金色大字显示，是整个页面最醒目的元素。金色（colors.textGold）和游戏风格一致，也暗示了 App 的主题。

版本号：

版本号用较小的灰色字体显示，不抢风头但清晰可见。版本号的格式是语义化版本（Semantic Versioning）：

复制代码

主版本号.次版本号.修订号
1.0.0

主版本号：有重大更新或不兼容的改动时增加
次版本号：添加新功能时增加
修订号：修复 bug 时增加

关于应用卡片

tsx 复制代码

      <View style={styles.card}>
        <Text style={styles.cardTitle}>关于应用</Text>
        <Text style={styles.cardText}>LOL 助手是一款英雄联盟游戏数据查询工具，提供英雄、装备、符文等游戏数据的查询功能。</Text>
      </View>

这段文字简洁地说明了 App 的核心功能：

是什么：英雄联盟游戏数据查询工具
能做什么：查询英雄、装备、符文等数据

文案写作的原则：

简洁：一两句话说清楚，不要长篇大论
具体：列举具体功能（英雄、装备、符文），而不是泛泛而谈
用户视角：强调"查询功能"，这是用户关心的

数据来源卡片

tsx 复制代码

      <View style={styles.card}>
        <Text style={styles.cardTitle}>数据来源</Text>
        <Text style={styles.cardText}>所有游戏数据来源于 Riot Games 官方 Data Dragon 服务。</Text>
      </View>

说明数据来源有几个作用：

建立信任：用户知道数据来自官方，会更信任 App 的准确性。

版权合规：表明我们使用的是官方公开的数据服务，不是非法获取的。

技术透明：对于开发者用户，他们可能对数据来源感兴趣。

Data Dragon 是什么？

Data Dragon 是 Riot Games 提供的静态数据服务，包含：

英雄数据（属性、技能、皮肤等）
装备数据（属性、价格、合成路径等）
符文数据（效果、图标等）
召唤师技能数据
游戏图片资源

开发者可以免费使用这些数据，但需要遵守 Riot 的使用条款。

免责声明卡片

tsx 复制代码

      <View style={styles.card}>
        <Text style={styles.cardTitle}>免责声明</Text>
        <Text style={styles.cardText}>本应用与 Riot Games 无关，仅供学习交流使用。英雄联盟及相关商标归 Riot Games 所有。</Text>
      </View>

免责声明是法律保护的重要部分，这段文字包含三个关键信息：

声明内容	法律意义
"与 Riot Games 无关"	表明这不是官方 App，避免用户误解
"仅供学习交流使用"	限定使用范围，表明非商业目的
"商标归 Riot Games 所有"	承认版权归属，尊重知识产权

为什么这很重要？

如果没有免责声明，可能面临的风险：

商标侵权：使用"英雄联盟"、"LOL"等商标
版权侵权：使用游戏图片、数据
用户误解：用户以为这是官方 App，出问题后找 Riot

有了免责声明，至少表明了我们的善意和合规意识。

页脚设计

tsx 复制代码

      <View style={styles.footer}>
        <Text style={styles.footerText}>Made with ❤️ for LOL Players</Text>
      </View>

页脚是一个情感化的设计元素。"Made with ❤️ for LOL Players"传达了：

热爱：开发者是带着热情做这个 App 的
社区感：这是为 LOL 玩家群体做的
人情味：不是冷冰冰的商业产品

这种小细节可以让用户感受到 App 背后是真实的人，而不是机器。

样式设计详解

tsx 复制代码

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    backgroundColor: colors.background, 
    padding: 16
  },
  header: {
    alignItems: 'center', 
    paddingVertical: 32
  },
  logo: {
    fontSize: 64, 
    marginBottom: 12
  },
  appName: {
    fontSize: 28, 
    fontWeight: 'bold', 
    color: colors.textGold, 
    marginBottom: 4
  },
  version: {
    fontSize: 14, 
    color: colors.textSecondary
  },
  card: {
    backgroundColor: colors.backgroundCard, 
    borderRadius: 12, 
    padding: 16, 
    marginBottom: 12, 
    borderWidth: 1, 
    borderColor: colors.border
  },
  cardTitle: {
    fontSize: 16, 
    fontWeight: '600', 
    color: colors.textPrimary, 
    marginBottom: 8
  },
  cardText: {
    fontSize: 14, 
    color: colors.textSecondary, 
    lineHeight: 22
  },
  footer: {
    alignItems: 'center', 
    paddingVertical: 32
  },
  footerText: {
    fontSize: 14, 
    color: colors.textMuted
  },
});

头部样式分析：

tsx 复制代码

header: {
  alignItems: 'center', 
  paddingVertical: 32
}

alignItems: 'center'：所有子元素水平居中
paddingVertical: 32：上下留出足够空间，让头部成为视觉焦点

Logo 样式：

tsx 复制代码

logo: {
  fontSize: 64, 
  marginBottom: 12
}

64px 的字号让 Emoji 显示得很大，成为页面的视觉锚点。用户打开页面，第一眼就会看到这个 Logo。

卡片文字的行高：

tsx 复制代码

cardText: {
  fontSize: 14, 
  color: colors.textSecondary, 
  lineHeight: 22
}

lineHeight: 22 是字号 14px 的 1.57 倍。这个比例让多行文字阅读起来更舒适，不会太挤也不会太散。

页脚样式：

tsx 复制代码

footer: {
  alignItems: 'center', 
  paddingVertical: 32
}
footerText: {
  fontSize: 14, 
  color: colors.textMuted
}

页脚使用最淡的文字颜色（textMuted），表示这是次要信息。大量的垂直内边距让页脚和内容区域有明显的分隔。

扩展：添加外部链接

可以添加跳转到官网、反馈邮箱等功能：

tsx 复制代码

import {Linking, TouchableOpacity} from 'react-native';

// 打开网页
const openWebsite = () => {
  Linking.openURL('https://developer.riotgames.com/');
};

// 发送邮件
const sendFeedback = () => {
  Linking.openURL('mailto:feedback@example.com?subject=LOL助手反馈');
};

// 在 UI 中使用
<TouchableOpacity style={styles.card} onPress={openWebsite}>
  <Text style={styles.cardTitle}>官方数据服务</Text>
  <Text style={styles.cardText}>访问 Riot Games 开发者门户 →</Text>
</TouchableOpacity>

<TouchableOpacity style={styles.card} onPress={sendFeedback}>
  <Text style={styles.cardTitle}>意见反馈</Text>
  <Text style={styles.cardText}>有问题或建议？发邮件告诉我们 →</Text>
</TouchableOpacity>

Linking.openURL 的用法：

URL 格式	效果
`https://...`	打开浏览器访问网页
`mailto:...`	打开邮件客户端
`tel:...`	打开电话拨号
`sms:...`	打开短信应用

错误处理：

tsx 复制代码

const openWebsite = async () => {
  const url = 'https://developer.riotgames.com/';
  const supported = await Linking.canOpenURL(url);
  
  if (supported) {
    await Linking.openURL(url);
  } else {
    Alert.alert('错误', '无法打开链接');
  }
};

canOpenURL 检查设备是否能处理这个 URL。比如，如果设备没有安装邮件客户端，mailto: 链接就无法打开。

扩展：添加社交媒体链接

可以添加社交媒体图标，方便用户关注：

tsx 复制代码

const socialLinks = [
  {name: 'GitHub', icon: '📦', url: 'https://github.com/...'},
  {name: '微博', icon: '📱', url: 'https://weibo.com/...'},
  {name: 'Discord', icon: '💬', url: 'https://discord.gg/...'},
];

<View style={styles.socialRow}>
  {socialLinks.map(link => (
    <TouchableOpacity 
      key={link.name}
      style={styles.socialBtn}
      onPress={() => Linking.openURL(link.url)}
    >
      <Text style={styles.socialIcon}>{link.icon}</Text>
      <Text style={styles.socialName}>{link.name}</Text>
    </TouchableOpacity>
  ))}
</View>

扩展：添加更新日志

可以展示 App 的更新历史：

tsx 复制代码

const changelog = [
  {version: '1.0.0', date: '2024-01-01', changes: ['首次发布', '支持英雄、装备、符文查询']},
  {version: '0.9.0', date: '2023-12-15', changes: ['Beta 测试版', '基础功能完成']},
];

<View style={styles.card}>
  <Text style={styles.cardTitle}>更新日志</Text>
  {changelog.map(log => (
    <View key={log.version} style={styles.changelogItem}>
      <View style={styles.changelogHeader}>
        <Text style={styles.changelogVersion}>v{log.version}</Text>
        <Text style={styles.changelogDate}>{log.date}</Text>
      </View>
      {log.changes.map((change, index) => (
        <Text key={index} style={styles.changelogText}>• {change}</Text>
      ))}
    </View>
  ))}
</View>

更新日志让用户知道 App 在持续改进，也方便用户了解新版本有什么变化。

扩展：添加开源许可

如果 App 使用了开源库，应该展示许可信息：

tsx 复制代码

const licenses = [
  {name: 'React Native', license: 'MIT'},
  {name: 'React', license: 'MIT'},
  // ...
];

<TouchableOpacity 
  style={styles.card} 
  onPress={() => navigate('Licenses')}
>
  <Text style={styles.cardTitle}>开源许可</Text>
  <Text style={styles.cardText}>查看本应用使用的开源库及其许可证 →</Text>
</TouchableOpacity>

这不仅是法律要求（很多开源许可证要求展示许可信息），也是对开源社区的尊重。

扩展：动态获取版本号

当前版本号是硬编码的，可以从 package.json 或原生配置中动态获取：

tsx 复制代码

import {Platform} from 'react-native';
import DeviceInfo from 'react-native-device-info';

const AppVersion = () => {
  const version = DeviceInfo.getVersion();      // 如 "1.0.0"
  const buildNumber = DeviceInfo.getBuildNumber(); // 如 "100"
  
  return (
    <Text style={styles.version}>
      版本 {version} ({buildNumber})
    </Text>
  );
};

动态获取版本号的好处是不会忘记更新------每次发版时只需要改一个地方（package.json 或原生配置），关于页面会自动显示新版本号。

页面的情感设计

关于页面不仅是信息展示，也是情感连接的机会。一些设计细节可以让用户感受到温度：

使用 Emoji：

🎮、❤️ 这些 Emoji 让页面不那么严肃，更有亲和力。

人性化的文案：

适当的留白：

头部和页脚的大量留白让页面呼吸感很强，不会让用户感到压迫。

一致的视觉语言：

金色的 App 名称、统一的卡片样式，都和整个 App 的设计语言一致。

小结

关于页面虽然简单，但涉及到几个重要的方面：

品牌展示：Logo、名称、版本号构成 App 的"名片"
信息传达：用简洁的文字说明 App 的功能和数据来源
法律合规：免责声明保护开发者，也尊重版权方
情感设计：通过文案和视觉细节建立与用户的情感连接
扩展性：可以添加外部链接、更新日志、开源许可等内容

一个好的关于页面能让用户感受到 App 背后的专业性 和人情味。

下一篇我们来实现主导航，把所有页面串联起来，完成整个 App 的架构。

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