跨平台移动开发完全指南：React Native与Flutter深度实践

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

// ========== React Native项目架构 ==========

/**
 * 推荐的项目结构
 *
 * src/
 * ├── api/              # API接口
 * ├── assets/           # 静态资源
 * ├── components/       # 通用组件
 * │   ├── common/       # 基础组件
 * │   └── business/     # 业务组件
 * ├── navigation/       # 导航配置
 * ├── screens/          # 页面组件
 * ├── services/         # 业务服务
 * ├── store/            # 状态管理
 * ├── utils/            # 工具函数
 * └── types/            # 类型定义
 */

// ========== 状态管理：Zustand ==========

import create from 'zustand';

// 定义Store类型
interface UserStore {
  user: User | null;
  token: string | null;
  isLoading: boolean;

  // Actions
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
  updateUser: (data: Partial<User>) => void;
}

// 创建Store
const useUserStore = create<UserStore>((set, get) => ({
  user: null,
  token: null,
  isLoading: false,

  login: async (credentials) => {
    set({ isLoading: true });

    try {
      const { user, token } = await api.login(credentials);

      set({
        user,
        token,
        isLoading: false
      });

      // 持久化
      await AsyncStorage.setItem('token', token);

    } catch (error) {
      set({ isLoading: false });
      throw error;
    }
  },

  logout: () => {
    set({ user: null, token: null });
    AsyncStorage.removeItem('token');
  },

  updateUser: (data) => {
    const { user } = get();

    if (user) {
      set({ user: { ...user, ...data } });
    }
  }
}));

// ========== 导航配置 ==========

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

// Stack Navigator
const Stack = createStackNavigator();

function AppStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

// Tab Navigator
const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          return <TabBarIcon focused={focused} name={route.name} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={AppStack} />
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

// ========== 性能优化 ==========

import { memo, useMemo, useCallback, useState } from 'react';

// 1. 组件memo化
const ListItem = memo(({ item, onPress }) => {
  return (
    <TouchableOpacity onPress={() => onPress(item)}>
      <Text>{item.title}</Text>
    </TouchableOpacity>
  );
}, (prevProps, nextProps) => {
  return prevProps.item.id === nextProps.item.id;
});

// 2. FlatList优化
function OptimizedList({ data, onEndReached }) {
  const renderItem = useCallback(({ item }) => (
    <ListItem item={item} onPress={handlePress} />
  ), []);

  const keyExtractor = useCallback((item) => item.id, []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      maxToRenderPerBatch={10}
      windowSize={5}
      initialNumToRender={10}
      getItemLayout={(data, index) => ({
        length: ITEM_HEIGHT,
        offset: ITEM_HEIGHT * index,
        index
      })}
      removeClippedSubviews={true}
    />
  );
}

// 3. 图片优化
import FastImage from 'react-native-fast-image';

const OptimizedImage = memo(({ uri, style }) => {
  return (
    <FastImage
      style={style}
      source={{
        uri,
        priority: FastImage.priority.normal,
      }}
      resizeMode={FastImage.resizeMode.cover}
    />
  );
});

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

// ========== Android原生模块 ==========

// UserModule.java
package com.myapp;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.Arguments;

public class UserModule extends ReactContextBaseJavaModule {

  private static final String E_USER_NOT_FOUND = "E_USER_NOT_FOUND";

  @Override
  public String getName() {
    return "UserModule";
  }

  @ReactMethod
  public void getUserInfo(String userId, Promise promise) {
    try {
      // 调用Android API
      User user = UserManager.getUser(userId);

      if (user == null) {
        promise.reject(E_USER_NOT_FOUND, "User not found");
        return;
      }

      // 转换为WritableMap
      WritableMap result = Arguments.createMap();
      result.putString("id", user.getId());
      result.putString("name", user.getName());
      result.putString("email", user.getEmail());

      promise.resolve(result);

    } catch (Exception e) {
      promise.reject("ERROR", e.getMessage());
    }
  }
}

// ========== iOS原生模块 ==========

// UserModule.m
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>

@interface RCT_EXTERN_MODULE(UserModule, NSObject)

RCT_EXTERN_METHOD(getUserInfo:(NSString *)userId
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)

@end

// UserModule.swift
@objc(UserModule)
class UserModule: NSObject {

  @objc
  static func requiresMainQueueSetup() -> Bool {
    return false
  }

  @objc(getUserInfo:resolver:rejecter:)
  func getUserInfo(_ userId: String,
                  resolver: @escaping RCTPromiseResolveBlock,
                  rejecter: @escaping RCTPromiseRejectBlock) {

    DispatchQueue.global(qos: .background).async {
      do {
        // 调用iOS API
        guard let user = UserManager.shared.getUser(id: userId) else {
          rejecter("USER_NOT_FOUND", "User not found", nil)
          return
        }

        let result: [String: Any] = [
          "id": user.id,
          "name": user.name,
          "email": user.email
        ]

        resolver(result)

      } catch {
        rejecter("ERROR", error.localizedDescription, error)
      }
    }
  }
}

// ========== TypeScript类型定义 ==========

// NativeModules.d.ts
declare module 'react-native' {
  interface NativeModulesStatic {
    UserModule: {
      getUserInfo(userId: string): Promise<UserInfo>;
    };
  }
}

interface UserInfo {
  id: string;
  name: string;
  email: string;
}

// 使用
import { NativeModules } from 'react-native';

const { UserModule } = NativeModules;

async function getUserInfo(userId: string) {
  try {
    const userInfo = await UserModule.getUserInfo(userId);
    console.log(userInfo);
  } catch (error) {
    console.error(error);
  }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

// ========== Flutter项目结构 ==========

/**
 * lib/
 * ├── core/               # 核心功能
 * │   ├── constants/     # 常量
 * │   ├── errors/        # 错误处理
 * │   ├── network/       # 网络请求
 * │   └── utils/         # 工具函数
 * ├── data/              # 数据层
 * │   ├── models/        # 数据模型
 * │   ├── repositories/  # 仓库实现
 * │   └── datasources/   # 数据源
 * ├── domain/            # 领域层
 * │   ├── entities/      # 实体
 * │   ├── repositories/  # 仓库接口
 * │   └── usecases/      # 用例
 * ├── presentation/      # 表现层
 * │   ├── pages/         # 页面
 * │   ├── widgets/       # 组件
 * │   └── bloc/          # 状态管理
 * └── main.dart
 */

// ========== BLoC状态管理 ==========

// user_event.dart
abstract class UserEvent {}

class LoginRequested extends UserEvent {
  final String email;
  final String password;

  LoginRequested({required this.email, required this.password});
}

class LogoutRequested extends UserEvent {}

// user_state.dart
abstract class UserState {}

class UserInitial extends UserState {}

class UserLoading extends UserState {}

class UserLoaded extends UserState {
  final User user;

  UserLoaded(this.user);
}

class UserError extends UserState {
  final String message;

  UserError(this.message);
}

// user_bloc.dart
class UserBloc extends Bloc<UserEvent, UserState> {
  final LoginUseCase loginUseCase;
  final LogoutUseCase logoutUseCase;

  UserBloc({
    required this.loginUseCase,
    required this.logoutUseCase,
  }) : super(UserInitial()) {
    on<LoginRequested>(_onLoginRequested);
    on<LogoutRequested>(_onLogoutRequested);
  }

  Future<void> _onLoginRequested(
    LoginRequested event,
    Emitter<UserState> emit,
  ) async {
    emit(UserLoading());

    final result = await loginUseCase(
      LoginParams(email: event.email, password: event.password),
    );

    result.fold(
      (failure) => emit(UserError(failure.message)),
      (user) => emit(UserLoaded(user)),
    );
  }

  Future<void> _onLogoutRequested(
    LogoutRequested event,
    Emitter<UserState> emit,
  ) async {
    await logoutUseCase();
    emit(UserInitial());
  }
}

// ========== 依赖注入 ==========

// service_locator.dart
final getIt = GetIt.instance;

void initDependencies() {
  // 外部依赖
  getIt.registerLazySingleton(() => http.Client());
  getIt.registerLazySingleton(() => SharedPreferences.getInstance());

  // 数据源
  getIt.registerLazySingleton<UserRemoteDataSource>(
    () => UserRemoteDataSourceImpl(client: getIt()),
  );

  getIt.registerLazySingleton<UserLocalDataSource>(
    () => UserLocalDataSourceImpl(sharedPreferences: getIt()),
  );

  // 仓库
  getIt.registerLazySingleton<UserRepository>(
    () => UserRepositoryImpl(
      remoteDataSource: getIt(),
      localDataSource: getIt(),
    ),
  );

  // 用例
  getIt.registerLazySingleton(
    () => LoginUseCase(repository: getIt()),
  );
  getIt.registerLazySingleton(
    () => LogoutUseCase(repository: getIt()),
  );

  // BLoC
  getIt.registerFactory(
    () => UserBloc(
      loginUseCase: getIt(),
      logoutUseCase: getIt(),
    ),
  );
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108

// ========== 性能优化技巧 ==========

// 1. 使用const构造函数
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Text('Hello'); // const
  }
}

// 2. 避免在build中创建对象
class OptimizedWidget extends StatelessWidget {
  final String text;

  const OptimizedWidget({Key? key, required this.text}) : super(key: key);

  static final _style = TextStyle(fontSize: 16); // 静态

  @override
  Widget build(BuildContext context) {
    return Text(text, style: _style);
  }
}

// 3. ListView优化
class OptimizedListView extends StatelessWidget {
  final List<Item> items;

  const OptimizedListView({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      // 添加itemExtent提升性能
      itemExtent: 60,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(items[index].title),
        );
      },
    );
  }
}

// 4. 图片缓存
class CachedImageWidget extends StatelessWidget {
  final String imageUrl;

  const CachedImageWidget({Key? key, required this.imageUrl}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      imageUrl: imageUrl,
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Icon(Icons.error),
      fadeInDuration: Duration(milliseconds: 300),
    );
  }
}

// 5. 使用RepaintBoundary
class RepaintBoundaryWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        color: Colors.blue,
      ),
    );
  }
}

// ========== Isolate使用 ==========

import 'dart:isolate';

// 在新Isolate中执行耗时操作
Future<ProcessedData> processInBackground(RawData data) async {
  final receivePort = ReceivePort();

  await Isolate.spawn(
    _isolateEntryPoint,
    _IsolateMessage(data: data, sendPort: receivePort.sendPort),
  );

  final result = await receivePort.first as ProcessedData;
  return result;
}

void _isolateEntryPoint(_IsolateMessage message) {
  final processed = _heavyComputation(message.data);
  message.sendPort.send(processed);
}

ProcessedData _heavyComputation(RawData data) {
  // 执行耗时计算
  return ProcessedData(/* ... */);
}

class _IsolateMessage {
  final RawData data;
  final SendPort sendPort;

  _IsolateMessage({required this.data, required this.sendPort});
}