android-dev - react-native

React Native 参考（TypeScript）

项目结构

src/ ├── app/ │ ├── App.tsx # Root component, providers │ ├── navigation/ # React Navigation stacks + types │ └── store/ # RTK store setup ├── features/ │ └── home/ │ ├── api/ # RTK Query endpoints │ ├── components/ # Screen-specific components │ ├── hooks/ # Feature-level custom hooks │ ├── screens/ # Screen components │ ├── store/ # Zustand slice or RTK slice │ └── types.ts # Feature types ├── shared/ │ ├── components/ # Design system components │ ├── hooks/ # Shared hooks │ ├── theme/ # Colors, typography, spacing constants │ └── utils/ # Utilities └── services/ ├── api/ # Axios/fetch client + interceptors └── storage/ # MMKV wrapper

导航设置（React Navigation v7）

exporttypeRootStackParamList={Auth:undefined;Home:undefined;Detail:{id:string};Settings:undefined;};exporttypeRootStackScreenProps<TextendskeyofRootStackParamList>=NativeStackScreenProps<RootStackParamList,T>;constStack=createNativeStackNavigator<RootStackParamList>();exportconstRootNavigator=()=>{constisLoggedIn=useAuthStore((s)=>s.isLoggedIn);return(<Stack.Navigator screenOptions={{headerShown:false}}>{isLoggedIn?(<><Stack.Screen name="Home"component={HomeScreen}/><Stack.Screen name="Detail"component={DetailScreen}/></>):(<Stack.Screen name="Auth"component={AuthScreen}/>)}</Stack.Navigator>);};

状态管理（Zustand 和 React Query）

// Client state — Zustand// Do not persist bearer or refresh tokens in AsyncStorage/plain MMKV.// Store secrets with a platform-backed module such as react-native-keychain// or expo-secure-store, and persist only non-sensitive UI state here.interfaceAuthState{isLoggedIn:boolean;setLoggedIn:(value:boolean)=>void;logout:()=>void;}exportconstuseAuthStore=create<AuthState>()(persist((set)=>({isLoggedIn:false,setLoggedIn:(value)=>set({isLoggedIn:value}),logout:()=>set({isLoggedIn:false}),}),{name:'auth-ui-storage',storage:createJSONStorage(()=>mmkvStorage)}));// Keep tokens outside persisted app state.constgetSecureToken=()=>Keychain.getGenericPassword().then((r)=>(r?r.password:null));constsaveSecureToken=(token:string)=>Keychain.setGenericPassword('auth',token);constclearSecureToken=()=>Keychain.resetGenericPassword();// Server state — React QueryexportconstuseItems=()=>useQuery({queryKey:['items'],queryFn:itemsApi.getAll,staleTime:5*60*1000,// 5 minutes});exportconstuseRefreshItems=()=>useMutation({mutationFn:itemsApi.refresh,onSuccess:()=>queryClient.invalidateQueries({queryKey:['items']}),});

屏幕模式

typeHomeScreenProps=RootStackScreenProps<'Home'>;exportconstHomeScreen:FC<HomeScreenProps>=({navigation})=>{const{data:items,isLoading,isError,refetch}=useItems();if(isLoading)return<LoadingView/>;if(isError)return<ErrorView onRetry={refetch}/>;return(<SafeAreaView style={styles.container}><FlatList data={items}keyExtractor={(item)=>item.id}renderItem={({item})=>(<ItemCard item={item}onPress={()=>navigation.navigate('Detail',{id:item.id})}/>)}ListEmptyComponent={<EmptyView/>}refreshControl={<RefreshControl refreshing={isLoading}onRefresh={refetch}/>}/></SafeAreaView>);};

API 客户端（带拦截器的 Axios）

constapiClient=axios.create({baseURL:Config.API_BASE_URL,timeout:10_000,headers:{'Content-Type':'application/json'},});// Auth token injectionapiClient.interceptors.request.use(async(config)=>{consttoken=awaitgetSecureToken();if(token)config.headers.Authorization=`Bearer${token}`;returnconfig;});// Token refresh on 401apiClient.interceptors.response.use((res)=>res,async(error:AxiosError)=>{if(error.response?.status===401){constnewToken=awaitrefreshToken();if(newToken){awaitsaveSecureToken(newToken);useAuthStore.getState().setLoggedIn(true);returnapiClient(error.config!);}awaitclearSecureToken();useAuthStore.getState().logout();}returnPromise.reject(error);});

API 响应验证（Zod）

constItemSchema=z.object({id:z.string(),title:z.string(),description:z.string().optional(),createdAt:z.string().datetime(),});constItemsResponseSchema=z.array(ItemSchema);typeItem=z.infer<typeofItemSchema>;constgetItems=async():Promise<Item[]>=>{const{data}=awaitapiClient.get('/items');returnItemsResponseSchema.parse(data);// throws ZodError on invalid shape};

关键依赖

{"dependencies":{"react-native":"0.74.x","@react-navigation/native":"^7.0.0","@react-navigation/native-stack":"^7.0.0","@tanstack/react-query":"^5.45.0","zustand":"^4.5.4","axios":"^1.7.2","zod":"^3.23.8","react-native-keychain":"^8.2.0","react-native-mmkv":"^2.12.2","react-native-safe-area-context":"^4.10.1","react-native-screens":"^3.32.0"},"devDependencies":{"typescript":"^5.4.5","@testing-library/react-native":"^12.5.1","msw":"^2.3.1","jest":"^29.7.0"}}

新架构（无桥）笔记

• 在android/gradle.properties中启用新架构：newArchEnabled=true
• 对于原生模块使用 TurboModules；避免使用传统的 NativeModules API
• 使用 Fabric 定制原生视图
• 始终启用 Hermes JS 引擎进行测试

性能提示

• 在renderItem/ 列表项组件上使用useCallback和memo
• FlatList的windowSize、initialNumToRender、maxToRenderPerBatch已调优
• 在 JSX 中避免使用匿名内联函数
• InteractionManager.runAfterInteractions用于导航后进行大量工作
• react-native-reanimated用于 60fps 动画（在 UI 线程上运行）

测试

describe('HomeScreen',()=>{it('shows items when query succeeds',async()=>{server.use(http.get(`${API_URL}/items`,()=>HttpResponse.json([{id:'1',title:'Test Item'}])));const{getByText}=render(<QueryClientProvider client={testQueryClient}><HomeScreen navigation={mockNavigation}route={mockRoute}/></QueryClientProvider>);expect(awaitfindByText('Test Item')).toBeTruthy();});});