构建支持多平台的返利App跨平台开发策略

import 'package:flutter/material.dart';
import 'package:cn.juwatech.rebateapp/models/product.dart';
void main() {
  runApp(MyRebateApp());
}
class MyRebateApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '返利App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProductListScreen(),
    );
  }
}
class ProductListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('产品列表'),
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(products[index].name),
            subtitle: Text('返利金额：¥${products[index].rebateAmount.toStringAsFixed(2)}'),
          );
        },
      ),
    );
  }
}
// 示例产品数据模型
List<Product> products = [
  Product('商品A', 100.0),
  Product('商品B', 150.0),
  Product('商品C', 80.0),
];
class Product {
  String name;
  double rebateAmount;
  Product(this.name, this.rebateAmount);
}

import React from 'react';
import { StyleSheet, Text, View, FlatList } from 'react-native';
import Product from 'cn.juwatech.rebateapp/models/Product';
export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>返利App</Text>
      <FlatList
        data={products}
        keyExtractor={(item) => item.name}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item.name}</Text>
            <Text>返利金额：¥{item.rebateAmount.toFixed(2)}</Text>
          </View>
        )}
      />
    </View>
  );
}
const products = [
  new Product('商品A', 100.0),
  new Product('商品B', 150.0),
  new Product('商品C', 80.0),
];
class Product {
  constructor(name, rebateAmount) {
    this.name = name;
    this.rebateAmount = rebateAmount;
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginVertical: 20,
  },
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    width: '100%',
  },
});