react-native expo 第一章 人麻了也要学之要命的路由与打包流程

首先希望老哥们有知识 请分享给弟弟 让我也熟悉一下
解决后边expo go注册用户p is not a function问题

一 先了解一下基础项目（创建 了解）

具体是rn的子应用还是衍生应用 没有去过多关注
直接开始
expo中文地址
手机安装expogo地址
demo 和打包操作

1 创建一个项目

1.1创建 会自动下载node_module包

创建一个tsx项目

// tsx创建 -t 不用就是js
 npx create-expo-app -t

这里因为使用不同方式创建 不想看常规模板的可以直接看二目录了

1.2启动

启动 会有一个二维码 需要使用expo go App扫码 但我下载ios的没有找到扫描按钮 所以使用的是exp开头的地址
为什么要用ios是因为 android打开那个下载地址应该是外网 一直加载不出来 ios扫描完可以直接跳到store里下载 为了省事所以就没有搞and

npx expo start
expo start
//大概就是这样  
// exp://xxx.xxx.x.xx:8082 ios是通过在ios游览器输入 会弹出跳转expogo App
[二维码]
› Metro waiting on exp://xxx.xxx.x.xx:8082
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› shift+m │ more tools
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.

第一次进入修改时如果没有热更新 就s键重新打包一下就好了

2 然后就打开Safari游览器

输入 exp://111.111.0.11:8082
点击跳转 expo go [重点 先安装expo go]

3 看一下目录结构

这里是用的npx create-expo-app -t expo-template-blank-typescript创建空模板
所以和npx create-expo-app -t有所不同 后面二扩展会使用npx create-expo-app -t创建的文件使参照

1. assets 静态资源 默认里面是不同端的 启动图标 （web的是title的图标）
2. node_module默认下载好的
3. app.json 相关配置
4. 
5. App.tsx 直接就是一个页面
6. index.ts 入口文件

4 看一下expo go

ok了 这就是完成了

二 扩展（环境 打包 路由 其他功能）

接下来书接上文 因为这里采用的npx create-expo-app -t创建的项目 所以 文件目录发生变化了
这里不贴原目录了 直接按照下面的改就行
1 绿色框里 将绿色框以外的文件夹全部删掉 （components hooks scripts …）
2 红色是自己创建的 原项目没有 创建好后

修改好了以后

1 启动

启动好 终端和一目录一样

expo start

打开项目也和 一目录一样 打开Safari游览器
输入 exp://111.111.0.11:8082
点击跳转 expo go [重点 先安装expo go]
就看见index

2 目录

创建了一个appindex
和components 的child
组件通讯就是和react一样的
上一次用rn还是0.61版本 很多东西没有规范现在0.76版本很多在ts都做了规范 尽可能使用语义化标签
其他组件就不一一展示了react-native组件
app–index
文件结构是
– app
----index.tsx
----login
------index.tsx

import { StyleSheet, View, Text, Button } from 'react-native'
import React, { useState } from 'react'
import { Link } from 'expo-router'
import Child from '@/src/components/child'
const index = () => {
    const [str, setStr] = useState<childPropsType['str']>('childStr');
    return (
        <View>
            <Child str={str}></Child>
            <Text>index</Text>
            <View style={styles.btn}>
                <Button color={str === 'childStr' ? '#f00' : 'inherit'} onPress={() => setStr('childStr')} title="childStr" />
                <Button color={str === 'parentStr' ? '#f00' : 'inherit'} onPress={() => setStr('parentStr')} title="parentStr" />
            </View>
            // 回到首页就是 href="/" 
            <Link href="/login" style={{ textAlign: 'center', margin: 10, color: '#0ff', fontSize: 20 }}>
                <Text>goLoagin</Text>
            </Link>
        </View>
    )
}
const styles = StyleSheet.create({
    btn: {
        width: '100%',
        backgroundColor: '#eeeeee'
    }
})
export default index

3 路由 这里有点奇怪 为了学习不会变乱 这里没有引入其他router相关plugin

正常会留有痕迹的跳转就是采用 **import { Link } from ‘expo-router’**的link跳转 可以返回的

<Link href='/my' style={{ textAlign: 'center', margin: 10, fontSize: 20 }}>
                <Text>go my tab</Text>
            </Link>

清除路由状态 跳到指定tab
有几种跳转但没有看见有重置路由栈的 只看见使用replace替换当前路由 文档没找到 有找到的请留言发我谢谢
跳转路由后也没看见 navigation.getState()里有全部的路由项但却可以正常返回跳转
这个路由 文档写的并不太好 所以可能还是不能用这种混合的 有时间可以看一下 import {router} from 'expo-router’的router 做一个统一 后续做个小demo再分享

 <Text onPress={() => navigation.reset({
                index: 0, routes: [{ name: '(tabs)' as never, params: { screen: 'index' } }],
            })}>重清空路由栈堆去tabs的index</Text>
            <Text onPress={() => router.replace('/login')}>router 替换当前页面去login页</Text>
            <Link replace href='/login' >
                <Text>link replace替换当前页面去login页</Text>
            </Link>
            <Link href='/login'>
                <Text>跳转去login页</Text>
            </Link>

4 环境

console.log( process.env); 可以获取到 NODE_ENV
/**
{"NODE_ENV": "development"}
 (NOBRIDGE) LOG  development
*/

5 请求

fetch请求 不多说了 fetch 成功就json()一下 失败打印一下 正常封装就可以

6 状态管理

我推荐的是 zustand 这个是新出的react状态管理 之前测试一下 整体使用来说 要比redux和moxb更简单方便
但redux有一个扩展很强 这个zustand更倾向于轻量级 一眼就看会 可以找一下官网 very简单 我这里没有引入就不主要看了

6打包

demo 和打包操作
打包 嗯。。。。。。。。 这里不说了 说是要eas 但npm install -g eas-cli 之后 需要登录 这个登录是expo官网注册的用户 不注册不行 但现在当前这个时候 我不知道那个官网什么毛病 注册就 p is not a function 什么鬼东西

整体 来说 文档不太友好 需要去猜 去试 也是挺难得 整个项目就暂时停留在这吧 后续写demo再继续分享