如何使用 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 使用 或使用 Platform API：

  
  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 进行打包。