React Native跨平台应用构建实战：从0到1搭建可上线的移动App

node -v # 输出v20.x.x说明成功
npm -v  # 输出对应的npm版本

npm install -g expo-cli

expo init MyFirstRNApp # 项目名随便起，比如“我的RN小应用”
cd MyFirstRNApp        # 进入项目目录
expo start              # 启动开发服务器

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, Alert } from 'react-native';

// 登录页面组件
const LoginScreen = () => {
  // 用useState管理输入框状态
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // 登录按钮点击事件
  const handleLogin = () => {
    if (!email || !password) {
      Alert.alert('提示', '请填写邮箱和密码');
      return;
    }
    // 这里可以对接后端接口，比如调用axios发请求
    console.log('登录信息：', email, password);
    Alert.alert('成功', '登录请求已发送！');
  };

  return (
    <View style={styles.container}>
      {/* 标题 */}
      <Text style={styles.title}>欢迎登录我的App</Text>

      {/* 邮箱输入框 */}
      <TextInput
        style={styles.input}
        placeholder="请输入邮箱"
        value={email}
        onChangeText={setEmail} // 输入时更新状态
        keyboardType="email-address" // 弹出邮箱键盘
        autoCapitalize="none" // 不自动大写
      />

      {/* 密码输入框 */}
      <TextInput
        style={styles.input}
        placeholder="请输入密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry // 密码隐藏
      />

      {/* 登录按钮 */}
      <Button title="立即登录" onPress={handleLogin} />
    </View>
  );
};

// 样式表（类似CSS，但用React Native的StyleSheet）
const styles = StyleSheet.create({
  container: {
    flex: 1, // 占满整个屏幕
    justifyContent: 'center', // 垂直居中
    padding: 20, // 左右内边距
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    textAlign: 'center',
  },
  input: {
    height: 50,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingLeft: 15,
    marginBottom: 20,
    backgroundColor: '#fff',
  },
});

export default LoginScreen;

import React, { createContext, useState, useContext } from 'react';

// 创建主题上下文
const ThemeContext = createContext();

// 主题提供者组件（包裹需要共享主题的组件）
export const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false); // 默认浅色主题

  // 切换主题的方法
  const toggleTheme = () => {
    setIsDarkMode(prev => !prev);
  };

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 自定义Hook，方便组件使用主题
export const useTheme = () => useContext(ThemeContext);

import { useTheme } from './context/ThemeContext'; // 导入自定义Hook

const LoginScreen = () => {
  const { isDarkMode } = useTheme(); // 获取当前主题状态

  return (
    <View style={[
      styles.container,
      { backgroundColor: isDarkMode ? '#1a1a1a' : '#f5f5f5' } // 主题色切换
    ]}>
      <Text style={[
        styles.title,
        { color: isDarkMode ? '#fff' : '#000' } // 文字颜色切换
      ]}>欢迎登录我的App</Text>
      {/* 其他组件同理... */}
    </View>
  );
};

import { ThemeProvider, useTheme } from './src/context/ThemeContext';
import LoginScreen from './src/screens/LoginScreen';

const App = () => {
  const { toggleTheme } = useTheme(); // 获取切换方法

  return (
    <ThemeProvider>
      <LoginScreen />
      {/* 主题切换按钮，放在屏幕右下角 */}
      <Button
        title="切换主题"
        onPress={toggleTheme}
        style={{ position: 'absolute', bottom: 20, right: 20 }}
      />
    </ThemeProvider>
  );
};

export default App;

expo install expo-camera

import React, { useState, useEffect, useRef } from 'react';
import { View, Button, Alert } from 'react-native';
import { Camera } from 'expo-camera';
import { useTheme } from '../context/ThemeContext';

const CameraScreen = () => {
  const { isDarkMode } = useTheme();
  const [hasPermission, setHasPermission] = useState(null);
  const cameraRef = useRef(null); // 相机引用，用来拍照

  // 请求相机权限
  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  // 没有权限时显示提示
  if (hasPermission === false) {
    return <Text style={{ color: isDarkMode ? '#fff' : '#000' }}>需要相机权限才能使用</Text>;
  }

  // 拍照函数
  const takePicture = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync();
      Alert.alert('成功', `照片保存路径：${photo.uri}`);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <Camera
        ref={cameraRef}
        style={{ flex: 1 }}
        type={Camera.Constants.Type.back} // 后置摄像头
      />
      <Button
        title="拍一张"
        onPress={takePicture}
        style={{ position: 'absolute', bottom: 20, alignSelf: 'center' }}
      />
    </View>
  );
};

export default CameraScreen;

{
  "expo": {
    "name": "我的第一个RN App", // App名称
    "slug": "my-first-rn-app", // 项目唯一标识（小写，无空格）
    "version": "1.0.0", // 版本号
    "icon": "./assets/icon.png", // App图标（放在assets文件夹里）
    "splash": { // 启动页
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "bundleIdentifier": "com.yourname.myfirstrnapp", // iOS包名（类似“com.张三.我的App”）
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yourname.myfirstrnapp", // Android包名（和iOS类似）
      "versionCode": 1
    }
  }
}

expo build:ios

expo build:android