课程分类

Expo CLI Expo 开发需要使用 Expo CLI(https://docs.expo.dev/workflow/expocli/) 命令行工具。可以用它伺服服务，查看日志，在模拟器中…

初始化项目 sh 创建一个名叫 expodemo 的项目 npx createexpoapp expodemo 启动服务 bash 进入项目中 cd expodemo 启动服务 npx expo start 运行与…

过时注意： 由于Expo官方新发布了Expo Router，是基于React Navigaion的再次封装，相对来说更加简单好用。 所以推荐直接使用Expo…

方法列表 用法 |说明 | navigation.navigate('Details') | Details是另一页面的 namebr如果已经在Details页面了，则不能再次跳转 navigation…

方法列表 用法 |说明 | navigation.navigate('Details', {br     id: 12,br     otherParam: '还可以同时传递其他参数…

方法列表 用法 |说明 | options={({ route }) = ({ title: route.params.title })}| 在stack中配置，会取得上一页传递过来的title参数 navigation…

顶部按钮 jsx import as React from 'react'; import { View, Text, Button, Image } from 'reactnative'; import { NavigationContainer } from '@reactnavigation/native'; import { createNativeStackNavigator } from '@reactnavigation/nativestack'; function HomeScreen({ navigation…

安装 sh yarn add @reactnavigation/bottomtabs 基础的Tab jsx import as React from 'react'; import { Text, View } from 'reactnative'; import { NavigationContainer } from '@reactnavigation/native'; import { createBottomTabNavigator } from…

案例 嵌套层级为： Tab.Navigator HomeStackScreen HomeScreen ArticlesScreen SettingsStackScreen SettingsScreen DetailsScreen 例子从HomeStackScreen的HomeScreen，跳转到SettingsStackScreen的DetailsScreen。由于HomeScreen与DetailsScreen分别属于…

实现代码 jsx import as React from 'react'; import { View, Text, Button } from 'reactnative'; import { NavigationContainer } from '@reactnavigation/native'; import { createNativeStackNavigator } from '@reactnavigation/nativestack'; function HomeScreen({ navigation }) { return…

过时注意： 由于Expo官方新发布了Expo Router，是基于React Navigaion的再次封装，相对来说更加简单好用。 所以推荐直接使用Expo…

项目结构说明 在项目根目录下，新建如下文件夹结构 src components（存放自定义组件） discover（发现stack相关组件) setting（设置stack相关组件…

后端接口地址 新建src/constants/Api.js文件 js const dev = false; const Api = dev ? 'http://127.0.0.1:3000' : 'https://clwy.cn…

Screen页面示例图 需要新建的页面相当的多！ 发现discover相关的 Screen 新增src/screens/discover/HomeScreen.js jsx import { Button, Text, View…

示例图 根Stack 新建src/navigation/RootStackScreen.js文件 jsx import { NavigationContainer } from '@reactnavigation/native'; import { createNativeStackNavigator } from '@reactnavigation/nativestack'; import InformationStackScreen from './stacks/InformationStackScreen'; import TeacherHomeScreen…

配置文件 新建src/navigation/options/TabOption.js文件 jsx import SimpleLineIcons from '@expo/vectoricons/SimpleLineIcons'; // TabOption 配置 const TabOption = route = { let labelName; let iconName; switch…

Tab的三个首页，增加顶部图标 新建src/navigation/options/HeaderButtonsOption.js文件 jsx import SimpleLineIcons from '@expo/vectoricons/SimpleLineIcons'; import Colors from '../../constants/Colors'; const HeaderButtonsOption…

Stack公共基础配置 新建src/navigation/options/CardOption.js文件 jsx import Colors from '../../constants/Colors'; import Ionicons from 'reactnativevectoricons/Ionicons'; import { Platform } from 'reactnative'; // Card Stack…

Modal配置文件 新建src/navigation/options/ModalOption.js文件 jsx import as React from 'react'; import Ionicons from 'reactnativevectoricons/Ionicons'; import Colors from '../../constants/Colors'; import { Platform…

fetchRequest 新建src/utils/fetchRequest.js文件 js import AsyncStorage from '@reactnativeasyncstorage/asyncstorage'; import Api from '../constants/Api'; // 自定义 fetch，加上了登录参数 const fetchRequest =…