react native框架如何
React Native 框架基础
React Native 是一个由 Facebook 开发的跨平台移动应用框架，允许开发者使用 JavaScript 和 React 构建原生移动应用。它通过将 React 组件映射到原生 UI 组件，实现了高性能和原生体验。
安装与环境配置
确保 Node.js 和 npm/yarn 已安装。全局安装 React Native 命令行工具：
npm install -g react-native-cli或使用 npx（推荐）：
npx react-native init ProjectName项目结构
初始化后的项目包含以下核心文件：
App.js：应用入口文件。android/和ios/：原生平台代码目录。node_modules/：依赖库。package.json：项目配置和依赖管理。
基本组件与 API
React Native 提供了一系列内置组件和 API：
- 核心组件：
View,Text,Image,ScrollView,FlatList等。 - API：
Alert,AsyncStorage,Geolocation等。
示例代码：
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text>Hello React Native!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;样式与布局
使用 StyleSheet 创建样式对象，支持类似 CSS 的语法但采用驼峰命名：
const styles = StyleSheet.create({
box: {
width: 100,
height: 100,
backgroundColor: 'blue',
},
});布局默认使用 Flexbox，与 Web 的 Flexbox 类似但略有差异（如默认 flexDirection 为 column）。
处理用户输入
常用交互组件：
Button：简单按钮。TextInput：文本输入框。TouchableOpacity：可点击区域。
示例：
<TouchableOpacity onPress={() => alert('Pressed!')}>
<Text>Click Me</Text>
</TouchableOpacity>导航
React Navigation 是常用的导航库：
npm install @react-navigation/native @react-navigation/stack基本配置：
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}调试与运行
- 调试：使用 Chrome 开发者工具或 Flipper。
- 运行：
- iOS：
npx react-native run-ios - Android：
npx react-native run-android
- iOS：
性能优化
- 使用
FlatList替代ScrollView渲染长列表。 - 避免不必要的重渲染，使用
React.memo或useMemo。 - 减少桥接通信，优先使用 JavaScript 逻辑。
平台特定代码
通过文件后缀（如 .ios.js 或 .android.js）或 Platform API 区分平台：
import { Platform } from 'react-native';
const styles = StyleSheet.create({
height: Platform.OS === 'ios' ? 200 : 100,
});发布应用
- Android：生成 APK/AAB 文件，上传到 Google Play。
- iOS：通过 Xcode 归档并提交到 App Store。
社区与资源
- 官方文档：https://reactnative.dev
- 第三方库：https://reactnative.directory
- 示例项目：GitHub 上的 React Native 社区仓库。
