项目初始化 资源准备
-
初始化工程和安装
-
完成基础项目配置:名字,图标,应用id
-
核对设计稿,准备资源图片,导入图片
项目配置TypeScript
-
安装 TypeScript
npm install --save-dev typescript
-
生成tsconfig.json
-
tsc --init
-
-
安装类型申明(众多)
npm i --save-dev @types/react @types/react-native
AsyncStorage :数据存储
-
集成async-storage
@react-native-async-storage/async-storage
-
保存数据:AsyncStorage.setItem()
-
读取数据:AsyncStorage.getItem()
前期重点:路由管理
-
集成react-navigation
-
npm i @react-navigation/bottom-tabs npm i @react-navigation/native npm i @react-navigation/stack npm i react-native-gesture-handler npm i react-native-safe-area-context npm i react-native-screens
-
-
页面跳转
-
页面替换
-
页面回退
构建导航栈
-
在App.tsx根节点构建导航栈
import React, { Component } from 'react'; import type {PropsWithChildren} from 'react'; import { SafeAreaView, StatusBar } from 'react-native'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import axios from 'axios'; import { Button } from '@rneui/base'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import PageA from './src/modules/PageA'; import PageB from './src/modules/PageB'; const Stack = createStackNavigator(); function App() : JSX.Element{ return ( <SafeAreaProvider> <StatusBar barStyle={'dark-content'} backgroundColor={'white'} /> <NavigationContainer> <Stack.Navigator initialRouteName='PageA'> <Stack.Screen name="PageA" component={PageA} options={{ }} /> <Stack.Screen name="PageB" component={PageB} options={{ }} /> </Stack.Navigator> </NavigationContainer> </SafeAreaProvider> ); } export default App;
-
配置导航栈属性
cardStyle:{elevation:1,} // 页面层级提升一层 <Stack.Screen name="PageB" component={PageB} options={{ headerShown:false, ...TransitionPresets.RevealFromBottomAndroid, // 页面跳转的过渡 }} />
欢迎页面,登陆页面
-
开发欢迎页面,并设置3秒倒计时
-
开发登陆页面,并设置3秒倒计时
-
三页面连续跳转
细化登录页交互
-
显示账号密码输入长度,并对手机号做格式化展示
-
密码可见与不可见切换
-
登录按钮可点击判断
本地nodejs服务
-
为什么使用本地nodejs服务模拟数据
-
初识egg.js: 初始化,controller,静态资源
-
本地nodejs服务使用方法
封装接口配置
-
增加apis接口配置文件
-
使用简化接口配置名发起请求
-
拦截接口响应