React Native 鸿蒙跨平台应用开发实践：每日早报

{
  "核心框架": {
    "react-native": "0.72.5",
    "react": "18.2.0",
    "@react-native-oh/react-native-harmony": "^0.72.86"
  },
"开发语言": {
    "typescript": "4.8.4"
  },
"网络请求": {
    "axios": "^1.6.7"
  },
"构建工具": {
    "@react-native/metro-config": "^0.72.11"
  }
}

DailyBriefHarmony/
├── App.tsx                 # 主应用组件，路由管理
├── NewsPage.tsx           # 每日早报页面组件
├── ImageViewer.tsx        # 图片查看器组件
├── config.js              # API 配置文件
├── android/               # Android 原生代码
├── ios/                   # iOS 原生代码
├── harmony/               # 鸿蒙原生代码
└── README.md              # 项目文档

function App(): JSX.Element {
const [currentPage, setCurrentPage] = useState<'home' | 'news' | 'image'>('home');
const [selectedImageUrl, setSelectedImageUrl] = useState<string>('');
const isDarkMode = useColorScheme() === 'dark';

// 路由逻辑
if (currentPage === 'news') {
    return <NewsPage onBackToHome={handleBackToHome} onNavigateToImage={handleNavigateToImage} />;
  }

if (currentPage === 'image') {
    return <ImageViewer imageUrl={selectedImageUrl} onBack={handleBackFromImage} />;
  }

// 默认首页
return (
    // 首页内容
  );
}

const fetchNews = async () => {
try {
    const response = await axios.post(API_CONFIG.ZAOBAO_API.url, {
      token: API_CONFIG.ZAOBAO_API.token,
      format: API_CONFIG.ZAOBAO_API.format,
    });

    if (response.data && response.data.code === 200) {
      setNewsData(response.data.data);
    } else {
      Alert.alert('错误', '获取早报数据失败');
    }
  } catch (error) {
    console.error('API Error:', error);
    Alert.alert('网络错误', '请检查网络连接后重试');
  } finally {
    setLoading(false);
    setRefreshing(false);
  }
};

const ImageViewer: React.FC<ImageViewerProps> = ({imageUrl, onBack}) => {
const [imageLoading, setImageLoading] = useState(true);
const [imageError, setImageError] = useState(false);

return (
    <View style={[styles.container, backgroundStyle]}>
      {imageLoading && <LoadingIndicator />}

      {imageError ? (
        <ErrorView onRetry={handleRetry} />
      ) : (
        <Image
          source={{uri: imageUrl}}
          style={styles.fullScreenImage}
          resizeMode="contain"
          onError={() => setImageError(true)}
          onLoad={() => setImageLoading(false)}
        />
      )}
    </View>
  );
};

// package.json 中的关键依赖
"@react-native-oh/react-native-harmony": "^0.72.86"

// 鸿蒙构建脚本
"dev": "react-native bundle-harmony --dev"

harmony/
├── entry/
│   └── src/
│       └── main/
│           └── resources/
│               └── rawfile/
│                   └── bundle.harmony.js  # 鸿蒙打包后的 JS bundle

// 主题适配示例
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
  backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};

// 平台差异处理
const buttonStyle = Platform.select({
  ios: styles.iosButton,
  android: styles.androidButton,
  harmony: styles.harmonyButton,  // 鸿蒙特定样式
});

// 下拉刷新实现
<ScrollView
  refreshControl={
    <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
  }>
  {/* 内容 */}
</ScrollView>

// 错误边界处理
const handleImageError = () => {
  Alert.alert('图片加载失败', '请检查网络连接');
};

// config.example.js - 配置模板
const API_CONFIG = {
  ZAOBAO_API: {
    url: 'https://v3.alapi.cn/api/zaobao',
    token: 'your_api_token_here',
    format: 'json'
  }
};

// config.js - 实际配置（不提交到代码仓库）
// 开发者需要复制模板并填入真实的 API token

# Android 构建
npm run android

# iOS 构建
npm run ios

# 鸿蒙构建
npm run dev

{
  "scripts": {
    "lint": "eslint .",
    "test": "jest",
    "start": "react-native start"
  }
}