项目初始化

最新推荐文章于 2024-05-15 20:43:52 发布

赊汝

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量455

点赞数

文章标签： javascript react.js 开发语言

本文链接：https://blog.csdn.net/m0_63685436/article/details/130938976

版权

项目初始化资源准备

初始化工程和安装
完成基础项目配置：名字，图标，应用id
核对设计稿，准备资源图片，导入图片

项目配置TypeScript

安装 TypeScript
```
npm install --save-dev typescript
```
生成tsconfig.json
1. ```
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, // 页面跳转的过渡
            }}
          />