React Native

# 使用Expo创建项目
npx create-expo-app my-app
cd my-app

# 启动开发服务器
npx expo start

# 在模拟器中运行
# iOS: 按 i 键
# Android: 按 a 键

# 创建组件
import React from "react";
import { View, Text, StyleSheet, Button } from "react-native";

export default function App() {
    const [count, setCount] = React.useState(0);
    
    return (
        <View style={styles.container}>
            <Text style={styles.text}>Count: {count}</Text>
            <Button title="Increment" onPress={() => setCount(count + 1)} />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    text: {
        fontSize: 24,
        marginBottom: 20
    }
});

// React Native配置
// app.json
{
    "expo": {
        "name": "My App",
        "slug": "my-app",
        "version": "1.0.0",
        "orientation": "portrait",
        "icon": "./assets/icon.png",
        "userInterfaceStyle": "light",
        "splash": {
            "image": "./assets/splash.png",
            "resizeMode": "contain",
            "backgroundColor": "#ffffff"
        },
        "assetBundlePatterns": ["**/*"],
        "ios": {
            "supportsTablet": true,
            "bundleIdentifier": "com.myapp"
        },
        "android": {
            "adaptiveIcon": {
                "foregroundImage": "./assets/adaptive-icon.png",
                "backgroundColor": "#FFFFFF"
            },
            "package": "com.myapp"
        }
    }
}

// 依赖配置
// package.json
{
    "dependencies": {
        "expo": "~50.0.0",
        "react": "18.2.0",
        "react-native": "0.73.2",
        "@react-navigation/native": "^6.1.9",
        "@react-navigation/native-stack": "^6.9.17",
        "react-native-safe-area-context": "4.8.2",
        "react-native-screens": "~3.29.0"
    },
    "devDependencies": {
        "@babel/core": "^7.20.0",
        "@types/react": "~18.2.45",
        "typescript": "^5.1.3"
    }
}