Expo创建Demo

话不多说，直接开搞

1 准备环境

开发工具：Cursor
操作环境：Win11
模  拟  器：Android Studio中的安卓模拟器

2 创建工程文件夹

	我取名为BestBookReader

3 使用Cursor打开上述文件夹

4 打开Cursor控制台

5 生成Expo项目

npx create-expo-app@latest --template blank ./

末尾的 ./ 表明是在当前目录创建，而不是新建目录。创建成功后，会生成工程文件。

下面是模版的介绍（template blank，blank就是模版）：

6 安装expo-router以及关联的插件

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

输出Added config plugin: expo-router表示安装成功

7 删除入口文件index.js & App.js

8 创建app文件夹，新建入口index.jsx

9 在新建的index.jsx中编写入口代码

输入r-n-f-e-s（没有横杠），然后按Tab或者Enter键，即可生成模版代码（rnfes，即reactNativeFunctionExportComponent， RN方法导出组件），别忘记Ctrl + S 保存修改

10 改变程序入口

打开 package.json ，修改 main 节点的值为 expo-router/entry ，Ctrl + S 保存修改

11 声明深度链接标识scheme

打开 app.json ， expo 节点下，新增属性 “scheme”: “bestbookreader” （记得末尾的逗号不能少，这是给外部跳转到本App用）

12 启动程序

npx expo start

生成成功，会有下面带二维码的输出：

13 在控制台中按a键，即可在模拟器中看到App画面了

需要提前启动Android Studio中的模拟器

14 修改内容

"index"这个文本显示在左上角，而且被遮挡了，可以小小的修改一下app/index.jsx中的代码：

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const index = () => {
  return (
    <View style={styles.container}>
      <Text style={{ fontSize: 30 }}>index</Text>
    </View>
  )
}

export default index

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems:'center',
        justifyContent:'center'
    }
})

Ctrl + S，保存，即可在画面上看到最新的改动：

至此，创建完成~