⚡

移动开发Skill mobile

移动开发技能涉及使用React Native和Flutter等跨平台框架构建应用程序，整合原生功能，优化性能，并处理应用部署。关键词：移动开发、React Native、Flutter、跨平台、原生集成、性能优化、应用商店。

移动开发 0 次安装 0 次浏览 更新于 3/12/2026

name: 移动 description: 使用React Native或Flutter开发应用程序，整合原生功能。用于移动开发、跨平台代码或应用优化。

移动开发

构建跨平台移动应用程序。

何时使用

  • React Native开发
  • Flutter开发
  • 移动性能问题
  • 原生模块集成
  • 应用商店部署

React Native

组件结构

import React, { useState, useCallback } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";

interface Props {
  title: string;
  onPress: () => void;
}

export function Button({ title, onPress }: Props) {
  const [pressed, setPressed] = useState(false);

  const handlePress = useCallback(() => {
    setPressed(true);
    onPress();
  }, [onPress]);

  return (
    <TouchableOpacity
      style={[styles.button, pressed && styles.pressed]}
      onPress={handlePress}
      activeOpacity={0.7}
    >
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: "#007AFF",
    padding: 16,
    borderRadius: 8,
  },
  pressed: {
    opacity: 0.8,
  },
  text: {
    color: "white",
    fontWeight: "600",
    textAlign: "center",
  },
});

导航

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

type RootStackParamList = {
  Home: undefined;
  Details: { id: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Flutter

小部件结构

class MyButton extends StatelessWidget {
  final String title;
  final VoidCallback onPressed;

  const MyButton({
    Key? key,
    required this.title,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        padding: const EdgeInsets.all(16),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
      child: Text(title),
    );
  }
}

性能提示

  • 对于长列表使用FlatList/ListView
  • 使用useCallback记忆回调
  • 避免内联样式（使用StyleSheet）
  • 懒加载屏幕和图像
  • 使用Flipper/DevTools进行分析

常见模式

模式 React Native Flutter
状态管理 useState/Redux setState/Riverpod
导航 React Navigation Navigator 2.0
HTTP请求 fetch/axios http/dio
存储 AsyncStorage shared_preferences
动画 Animated/Reanimated AnimationController

示例

输入: “构建一个列表屏幕” 行动: 创建具有虚拟化、下拉刷新、分页的FlatList

输入: “添加离线支持” 行动: 实现AsyncStorage缓存、同步队列、网络检测