如何使用 react native
安装开发环境
确保已安装 Node.js（建议使用 LTS 版本）。通过以下命令安装 React Native 命令行工具：
npm install -g expo-cli或使用 Yarn：
yarn global add expo-cli创建新项目
使用 Expo CLI 初始化新项目：
expo init MyProject选择模板（如空白模板或带导航的模板）。进入项目目录：
cd MyProject运行开发服务器
启动开发服务器：
npm start或：
expo start此命令会打开 Expo Dev Tools 界面，支持在模拟器、真机或浏览器中预览应用。
开发调试
- 模拟器：安装 Android Studio（Android）或 Xcode（iOS），通过 Expo CLI 自动连接。
- 真机：安装 Expo Go 应用，扫描终端显示的二维码。
- 热重载：修改代码后自动刷新界面，无需重新编译。
基本组件使用
React Native 提供核心组件替代 HTML 元素，例如：
import { View, Text, StyleSheet } from 'react-native';
function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hello React Native</Text>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
text: { fontSize: 20 }
});处理用户输入
使用 TextInput 和 Button 组件：
import { useState } from 'react';
import { TextInput, Button, Alert } from 'react-native';
function InputDemo() {
const [text, setText] = useState('');
return (
<>
<TextInput placeholder="Type here" onChangeText={setText} />
<Button title="Submit" onPress={() => Alert.alert('You typed:', text)} />
</>
);
}导航配置
安装 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.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}样式设计
使用 StyleSheet 创建样式对象：
const styles = StyleSheet.create({
box: {
width: 100,
height: 100,
backgroundColor: 'blue',
margin: 10
}
});支持 Flexbox 布局模型，与 Web 类似但默认方向为 column。
平台特定代码
通过文件后缀区分平台：
Component.ios.js：仅 iOS 使用Component.android.js：仅 Android 使用 或使用PlatformAPI：import { Platform } from 'react-native';
const styles = StyleSheet.create({ header: { paddingTop: Platform.OS === 'ios' ? 50 : 30 } });
### 构建发布
- Expo 项目：运行 `expo publish` 更新 OTA 或 `expo build:android`/`expo build:ios` 生成二进制文件。
- 裸项目：使用 Android Studio 或 Xcode 进行打包。
