项目初始化

项目初始化 资源准备

1. 初始化工程和安装

2. 完成基础项目配置：名字，图标，应用id

3. 核对设计稿，准备资源图片，导入图片

项目配置TypeScript

1. 安装 TypeScript

   npm install --save-dev typescript

2. 生成tsconfig.json

   1. tsc --init

3. 安装类型申明（众多）

   npm i --save-dev @types/react @types/react-native

AsyncStorage ：数据存储

1. 集成async-storage

   @react-native-async-storage/async-storage

2. 保存数据：AsyncStorage.setItem()

3. 读取数据：AsyncStorage.getItem()

前期重点：路由管理

1. 集成react-navigation

   1. 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

2. 页面跳转

3. 页面替换

4. 页面回退

构建导航栈

1. 在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 (
       
         
         
           
             
             
           
         
       
     );
   }
   ​
   export default App;

2. 配置导航栈属性

   cardStyle:{elevation:1,} // 页面层级提升一层
   

欢迎页面，登陆页面

1. 开发欢迎页面，并设置3秒倒计时

2. 开发登陆页面，并设置3秒倒计时

3. 三页面连续跳转

细化登录页交互

1. 显示账号密码输入长度，并对手机号做格式化展示

2. 密码可见与不可见切换

3. 登录按钮可点击判断

本地nodejs服务

1. 为什么使用本地nodejs服务模拟数据

2. 初识egg.js: 初始化，controller，静态资源

3. 本地nodejs服务使用方法

封装接口配置

1. 增加apis接口配置文件

2. 使用简化接口配置名发起请求

3. 拦截接口响应