当前位置：首页 > news >正文

移动端开发：React Native跨平台实战

news 2026/5/28 0:19:16

移动端开发：React Native跨平台实战

大家好，我是欧阳瑞（Rich Own）。今天想和大家聊聊React Native跨平台开发这个重要话题。作为一个全栈开发者，跨平台开发可以大大提高开发效率。今天就来分享一下React Native的实战经验。

React Native概述

什么是React Native？

React Native是Facebook开发的跨平台移动应用框架 使用JavaScript和React编写原生应用 一次编写，多平台运行

优势对比

特性	React Native	Native	Hybrid
开发效率	高	低	中
性能	接近原生	最高	较低
原生能力	可扩展	完整	有限
代码复用	高	低	中

环境搭建

安装依赖

# 安装Node.js brew install node # 安装Watchman brew install watchman # 安装React Native CLI npm install -g react-native-cli # 创建项目 npx react-native init MyApp # 运行项目 cd MyApp npx react-native run-ios npx react-native run-android

基础组件

View和Text

import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; const App = () => { return ( <View style={styles.container}> <Text style={styles.title}>Hello, React Native!</Text> <Text style={styles.subtitle}>这是一个跨平台应用</Text> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5' }, title: { fontSize: 24, fontWeight: 'bold', color: '#333' }, subtitle: { fontSize: 16, color: '#666', marginTop: 10 } }); export default App;

Image和ScrollView

import { Image, ScrollView } from 'react-native'; const App = () => { return ( <ScrollView style={styles.scrollView}> <Image source={{ uri: 'https://example.com/image.jpg' }} style={styles.image} resizeMode="cover" /> <Text style={styles.description}>图片描述文字</Text> </ScrollView> ); }; const styles = StyleSheet.create({ scrollView: { flex: 1 }, image: { width: '100%', height: 200 }, description: { padding: 16, fontSize: 16 } });

状态管理

useState和useEffect

import { useState, useEffect } from 'react'; const UserProfile = () => { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { fetchUser().then(data => { setUser(data); setLoading(false); }); }, []); if (loading) { return <Text>Loading...</Text>; } return ( <View> <Text>Name: {user.name}</Text> <Text>Email: {user.email}</Text> </View> ); };

Redux集成

// store.js import { createStore } from 'redux'; const initialState = { count: 0 }; function reducer(state = initialState, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } } export const store = createStore(reducer); // App.js import { Provider } from 'react-redux'; import { store } from './store'; const App = () => { return ( <Provider store={store}> <Counter /> </Provider> ); };

原生模块

自定义原生模块

// Android原生模块 public class MyModule extends ReactContextBaseJavaModule { public MyModule(ReactApplicationContext context) { super(context); } @Override public String getName() { return "MyModule"; } @ReactMethod public void showToast(String message) { Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_SHORT).show(); } }

// JavaScript调用 import { NativeModules } from 'react-native'; NativeModules.MyModule.showToast('Hello from Native!');

实战案例：Todo应用

import { useState } from 'react'; import { View, TextInput, Button, FlatList, Text } from 'react-native'; const TodoApp = () => { const [todos, setTodos] = useState([]); const [text, setText] = useState(''); const addTodo = () => { if (text.trim()) { setTodos([...todos, { id: Date.now(), text }]); setText(''); } }; const deleteTodo = (id) => { setTodos(todos.filter(todo => todo.id !== id)); }; return ( <View style={{ padding: 20 }}> <TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }} onChangeText={setText} value={text} placeholder="Enter todo" /> <Button title="Add Todo" onPress={addTodo} /> <FlatList data={todos} renderItem={({ item }) => ( <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: 5 }}> <Text>{item.text}</Text> <Button title="Delete" onPress={() => deleteTodo(item.id)} /> </View> )} keyExtractor={item => item.id.toString()} /> </View> ); };

最佳实践

1. 性能优化

// 使用FlatList代替ScrollView // 使用useMemo缓存计算结果 const memoizedData = useMemo(() => filterData(data), [data]); // 使用React.memo优化组件 const MemoizedComponent = React.memo(MyComponent);

2. 导航

import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator(); const App = () => { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Profile" component={ProfileScreen} /> </Stack.Navigator> </NavigationContainer> ); };