⚡

ReactNativeApp开发 react-native-app

React Native App开发技能涉及使用React Native构建跨平台移动应用，包括导航、状态管理、API集成和原生模块处理。

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

name: react-native-app description: 使用React Native构建跨平台移动应用。涵盖使用React Navigation进行导航，使用Redux/Context API进行状态管理，API集成和平台特定功能。

React Native App开发

概览

使用React Native创建健壮的跨平台移动应用程序，包括现代开发模式，如导航、状态管理、API集成和原生模块处理。

何时使用

  • 从单一代码库构建iOS和Android应用
  • 快速原型制作移动平台
  • 利用Web开发技能进行移动开发
  • 在React Native和React Web之间共享代码
  • 与原生模块和API集成

指令

1. 项目设置与导航

// 使用React Navigation进行导航
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function HomeStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: '#6200ee' },
        headerTintColor: '#fff',
        headerTitleStyle: { fontWeight: 'bold' }
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'Home Feed' }}
      />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          const icons = {
            HomeTab: focused ? 'home' : 'home-outline',
            ProfileTab: focused ? 'person' : 'person-outline'
          };
          return <Ionicons name={icons[route.name]} size={size} color={color} />;
        }
      })}>
        <Tab.Screen name="HomeTab" component={HomeStack} />
        <Tab.Screen name="ProfileTab" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

2. 使用Redux进行状态管理

import { createSlice, configureStore } from '@reduxjs/toolkit';
import { useSelector, useDispatch } from 'react-redux';

const itemsSlice = createSlice({
  name: 'items',
  initialState: { list: [], loading: false, error: null },
  reducers: {
    setItems: (state, action) => {
      state.list = action.payload;
      state.loading = false;
    },
    setLoading: (state) => { state.loading = true; },
    setError: (state, action) => {
      state.error = action.payload;
      state.loading = false;
    }
  }
});

export const store = configureStore({
  reducer: { items: itemsSlice.reducer }
});

export function HomeScreen() {
  const dispatch = useDispatch();
  const { list, loading, error } = useSelector(state => state.items);

  React.useEffect(() => {
    dispatch(setLoading());
    fetch('https://api.example.com/items')
      .then(r => r.json())
      .then(data => dispatch(setItems(data)))
      .catch(err => dispatch(setError(err.message)));
  }, [dispatch]);

  if (loading) return <ActivityIndicator size="large" />;
  if (error) return <Text>Error: {error}</Text>;

  return (
    <ScrollView>
      {list.map(item => <ItemCard key={item.id} item={item} />)}
    </ScrollView>
  );
}

3. 使用Axios进行API集成

import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000
});

// 请求拦截器用于认证
apiClient.interceptors.request.use(
  async (config) => {
    const token = await AsyncStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器用于令牌刷新
apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      try {
        const refreshToken = await AsyncStorage.getItem('refreshToken');
        const { data } = await axios.post(
          'https://api.example.com/auth/refresh',
          { refreshToken }
        );
        await AsyncStorage.setItem('authToken', data.accessToken);
        apiClient.defaults.headers.Authorization = `Bearer ${data.accessToken}`;
        return apiClient(originalRequest);
      } catch (refreshError) {
        return Promise.reject(refreshError);
      }
    }
    return Promise.reject(error);
  }
);

export const fetchUser = () => apiClient.get('/user/profile');
export const fetchItems = (page) => apiClient.get(`/items?page=${page}`);
export const createItem = (data) => apiClient.post('/items', data);

4. 使用Hooks的函数组件

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

export function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;
  const [item, setItem] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    loadItem();
  }, [itemId]);

  const loadItem = useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetch(
        `https://api.example.com/items/${itemId}`
      );
      const data = await response.json();
      setItem(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, [itemId]);

  if (loading) return <ActivityIndicator size="large" />;
  if (error) return <Text>Error: {error}</Text>;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{item?.title}</Text>
      <Text style={styles.description}>{item?.description}</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => navigation.goBack()}
      >
        <Text style={styles.buttonText}>Go Back</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 16, flex: 1 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 8 },
  description: { fontSize: 16, color: '#666', marginBottom: 16 },
  button: { backgroundColor: '#6200ee', padding: 12, borderRadius: 8 },
  buttonText: { color: '#fff', fontWeight: 'bold', textAlign: 'center' }
});

最佳实践

✅ DO

  • 使用React Hooks的函数组件
  • 实施适当的错误处理和加载状态
  • 使用Redux或Context API进行状态管理
  • 利用React Navigation进行路由
  • 使用FlatList优化列表渲染
  • 优雅地处理平台特定代码
  • 使用TypeScript进行类型安全
  • 在iOS和Android上测试
  • 使用环境变量进行API端点管理
  • 实施适当的内存管理

❌ DON’T

  • 过度使用内联样式（使用StyleSheet）
  • 无错误处理地进行API调用
  • 明文存储敏感数据
  • 忽略平台差异
  • 创建大型单体组件
  • 在列表中使用索引作为键
  • 进行同步操作
  • 忽略电池优化
  • 在未在真实设备上测试的情况下部署
  • 忘记取消订阅监听器