Skip to main content

expo新建项目后要做的事以及目录规划

新建命令​

npx create-expo-app@latest

生成一个expo router脚手架的文件系统。（本文写作时SDK 51）

后续处理​

Github​

Github配置​

首先在github.com登录你的账号。 新建与项目同名的repository，设置为private/public，不需要选新建README.md等。

本项目目录下执行以下命令，设置git：

git init // 可能非必须
git remote add origin 

// 如果是private需要加入密钥
https://密钥@github.com/你的用户名/你的项目名.git
(如要去掉之前的或出错了: git remote rm origin)

git branch -M main
git config user.email "你的github账号email"
git config user.name "你的用户名"

// git comment一下先
Git push (第一次会被提示正确语法，就按正确的来)

.gitignore文件​

我的建议，在文件尾部加入：

# local env files，环境变量文件
.env*.local
.env*

# apk keystore
*.keystore

# builds，各种打包后的文件以及如Google Cloud等服务生成的保密文件
*.aab
*.apk
*.tar
*.gz
outputs/*
*.ipa
YOUR_APP_ID-*.json

代码准备​

目录调整​

  • 将原根目录下的constants, app, components等移动到src下。
  • assets等保留在根目录。

新建目录​

  • lib
  • locale

根目录文件​

.env

几个md文件做记录​

README.md
UPDATES.md
DEV_LOGS.md

path快捷配置​

tsconfig.json

"compilerOptions": {
	"strict": true,
	"paths": {
		"@/*": [
		"./src/*"
		],
		"@*": [
			"./*"
		]
	}
}

src目录下的内容： @/components/* 根目录下的内容： @lib/*

必要内容​

src目录下

app
components
constants
test // 我的测试组件
backend // api等
hooks
types // typescript的类型定义
utils

src根文件

C.ts // 全局的常量
i18n.ts // 多语言配置
store.ts // 全局状态和本地存储管理

预设代码​

已经是个人风格的，好用的代码。 具体可看我的教程等。

src/constants
	Colors.ts
	Sizes.ts
	
src/hooks
	useStyles.ts

src/test
	ActionButton.tsx
	ActionGroup.tsx
	TestArea.tsx
	Styles.js // 保证整个test的风格等内容不受其他代码影响

原脚手架中必要保留文件​

// app下的
+not_found.tsx
_layout.tsx
// ...原+html.tsx/scripts等虽然没有用，也没有必要删除

图标、图片、动画文件等​

都放在assets下。

app配置​

app.json​

可以在有一定代码需要build / run时，而不是expo go时，再来配置。第一次expo run时，会生成相关内容，如包名等。

// expo项下
"splash": {
	"image": "./assets/...."
},
"ios": {
	"infoPlist": {
		"CFBundleAllowMixedLocalizations": true,
		"MinimumOSVersion": "12.0"
	},
	"config": {
		"usesNonExemptEncryption": false
	}
	// 至于buildNumber, 一般第一版我设置为0
},
...
"android": {
	"adaptiveIcon": {
	"foregroundImage": "./assets/images/adaptive-icon.png",
	...
	},
	"versionCode": 72008132, // 这个地方要匹配Google Play实际
	"permissions": [ //这些权限好像是自动配置的
		"INTERNET",
		"BILLING"
	]
},

多语言app名称配置。 具体做法参考：[[expo开发安卓app多语言名称显示这样做]] 如果不配置，则显示的名称与app.json中name的配置一致，基本上就是新建项目时输入的项目名。

eas配置​

这一步可以在有一些代码成形，需要打包测试前再来做。

eas build:config