项目初始化 资源准备

  1. 初始化工程和安装

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

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

项目配置TypeScript

  1. 安装 TypeScript

    1
    npm install --save-dev typescript

  2. 生成tsconfig.json

    1. tsc --init

      1

      

    1
    2
    3

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

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

    1
    2
    3
    4
    5

    ### AsyncStorage ：数据存储

    1.  集成async-storage

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    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
    1

  3. 页面跳转

  4. 页面替换

  5. 页面回退

构建导航栈

  1. 在App.tsx根节点构建导航栈

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    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>
     
   
);
}
​
export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

2.  配置导航栈属性

    ```
    cardStyle:{elevation:1,} // 页面层级提升一层
    <Stack.Screen
               name="PageB"
               component={PageB}
               options={{
                 headerShown:false,
                 ...TransitionPresets.RevealFromBottomAndroid, // 页面跳转的过渡
               }}
             />
    ```

### 欢迎页面，登陆页面

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

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

3.  三页面连续跳转

### 细化登录页交互

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

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

3.  登录按钮可点击判断

### 本地nodejs服务

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

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

3.  本地nodejs服务使用方法

### 封装接口配置

1.  增加apis接口配置文件

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

3.  拦截接口响应
文章作者: Mr. Fortunate
文章链接: https://www.fortunate.cool/2023/05/30/%E9%A1%B9%E7%9B%AE%E5%88%9D%E5%A7%8B%E5%8C%96/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 fortunate！
react.js 开发语言
评论