React Native 完整开发全流程（从零到上线）

1.前期环境准备

1.1 必备软件

Node.js：18+ 版本，管理依赖、运行脚本
JDK 17 （固定版本，RN 主流适配）
- 推荐下载 ZIP 压缩包，解压手动配环境变量
- 配置：JAVA_HOME + 写入系统Path
Android SDK
- 安装平台工具、模拟器镜像、构建工具
模拟器 / 安卓真机
- 模拟器：开启 CPU 虚拟化 VT
- 真机：开启开发者模式 + USB 调试
编辑器：VS Code；

1.2 创建新项目

javascript 复制代码

//创建项目
npx @react-native-community/cli init 你的项目名

//进入项目
cd 项目名

//启动项目
npm run android

2.项目目录规范

html 复制代码

RN项目
├── App.tsx          # 项目总入口、路由挂载点
├── src
│   ├── pages        # 所有业务页面
│   │   ├── Home.tsx 首页
│   │   ├── Login.tsx 登录页
│   │   └── Mine.tsx 个人中心
│   ├── components   # 全局公共组件(按钮、输入框、头部)
│   ├── api          # 接口请求
│   ├── utils        # 工具函数
│   └── assets       # 图片、静态资源
├── android          # 安卓原生壳(90%开发不用动)
├── ios              # iOS原生壳
├── package.json     # 依赖+启动命令
└── tsconfig.json    # TS配置

3. 页面编写与组件拆分

在src/pages新建独立.tsx页面
编写页面 UI + 业务逻辑
在入口 / 路由文件引入页面
实现页面跳转、传参、状态交互

4.联调后端接口

封装axios网络请求
对接后端接口，完成登录、列表、提交等功能
处理加载、报错、空数据状态

5.打包发布安卓 APK

html 复制代码

# 生成安卓正式打包文件
cd android
./gradlew assembleRelease

6.React Native 核心常用语法

基础布局标签（对标网页）

RN 标签	网页等价	作用
`<View>`	`<div>`	容器布局，块级盒子
`<Text>`	`<span>/<p>`	所有文字必须包裹 Text，不能直接写文字
`<Image>`	`<img>`	展示图片
`<TextInput>`	`<input>`	输入框
`<ScrollView>`	滚动 div	页面滚动
`<FlatList>`	循环列表	高性能长列表（首选）
`<Button>`	button 按钮	基础按钮

7.样式写法（核心）

css 复制代码

<View style={{flex:1,backgroundColor:'#fff'}}></View>

统一样式（推荐）

css 复制代码

import {StyleSheet} from 'react-native'

const styles = StyleSheet.create({
  box:{
    flex:1,
    justifyContent:'center', // 主轴居中
    alignItems:'center',     // 交叉轴居中
    padding:15
  },
  text:{
    fontSize:16,
    color:'#333'
  }
})

组件定义写法

javascript 复制代码

//函数是组件写法
import React from 'react'
import {View,Text} from 'react-native'

// 定义页面组件
const HomePage = ()=>{
  return (
    <View>
      <Text>首页页面</Text>
    </View>
  )
}

export default HomePage

状态管理

javascript 复制代码

import {useState} from 'react'

const [num,setNum] = useState(0)

// 使用
<Text>{num}</Text>
<Button title="加1" onPress={()=>setNum(num+1)} />

事件绑定

javascript 复制代码

// 点击事件
onPress={()=>{}}

// 输入框监听
<TextInput 
  value={text}
  onChangeText={(val)=>setText(val)}
/>

列表渲染 FlatList

javascript 复制代码

const list = [{id:1,name:'张三'},{id:2,name:'李四'}]

<FlatList
  data={list}
  keyExtractor={item=>item.id.toString()}
  renderItem={({item})=>(
    <View>
      <Text>{item.name}</Text>
    </View>
  )}
/>

页面跳转（导航核心）

javascript 复制代码

//安装导航
npm install @react-navigation/native

//基础跳转语法
// 跳转页面
navigation.navigate('页面名')
// 返回上一页
navigation.goBack()
// 跳转并传参
navigation.navigate('页面',{name:'测试'})

条件渲染

javascript 复制代码

{ flag ? <Text>显示</Text> : <Text>隐藏</Text> }

图片使用

html 复制代码

// 本地静态图片
<Image source={require('../assets/1.png')} />

// 网络图片
<Image source={{uri:'https://xxx.jpg'}} />

常用弹窗提示

javascript 复制代码

// 原生弹窗
Alert.alert('提示','确定要退出吗？')

尺寸适配

javascript 复制代码

import {Dimensions} from 'react-native'
// 获取屏幕宽高
const {width,height} = Dimensions.get('window')