react-native@0.61.5 使用 Typescript 撸一个APP

最新推荐文章于 2024-09-15 07:07:12 发布

置顶

学术袁

最新推荐文章于 2024-09-15 07:07:12 发布

阅读量1.7k

点赞数

分类专栏： react-native 文章标签： android react native typescript

本文链接：https://blog.csdn.net/junhuahouse/article/details/104855587

版权

激动不已 ~
自从 react-native@0.58.0 版本之后，进入了内网编程。在一个封闭的小圈圈里，以 react-native@0.48.0 版本进行编程。全靠徒手手撸代码，总觉得大能量无处尽放！
今天决定使用疫情期间学习的Typescript语言，来实现一个 react-native@0.61.5 版本的移动APP。
项目使用Typescript语言，集成了路由导航react-navigation 和 react-native-material-tabs。分别实现了登录页、库存列表页和库存单品详情页 3个页面。
先附带一下自己用Photoshop绘制的效果图**😗*
在这里插入图片描述
接下来，配置具备Typescript语言编程环境的 react-native@0.61.0 的项目。
介绍一个具备ts语言的RN模板，指令即可完成项目初始化

新建一个目录，在dos窗口执行终端命令 npx react-native init CarglassApp --template react-native-template-typescript

执行过程中，你或许会遇到这个 error error An unexpected error occurred: "https://registry.npm.taobao.org/react-native-template-react-native-template-typescript: Not found".

不捉急，有解决方案：

remove legacy react-native-cli
npm uninstall -g react-native-cli

install new thing
npm i -g @react-native-community/cli

and you can new project with react-native-template-typescript
npx react-native init MyApp --template react-native-template-typescript

然后你会发现，it works .
而报错原因是因为我在 react-native 官网搭建环境里配置所导致的资源路径不对。通过以上的修改则it works .

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用 
npx nrm use npm

CarglassAPP 项目初始化成功之后，让工程在安卓模拟器中跑起来。执行命令 cd CarglassApp && yarn react-native run-android
初始化工程
在这里插入图片描述
yarn react-native run-android 运行成功

效果展示

至此具备 Typescript 语言配置的 react-native 工程就配置完成了。

由于 RN 高版本的更新导致，安卓模拟器设备无法通过快捷键弹出调试菜单。但是可以在终端使用指令弹出调试菜单 adb shell input keyevent 82

经过一天的编码，展示一下成果图：

在这里插入图片描述
在该Demo项目中，使用到了Typescript语言下配置的路由导航react-navigation。

程序编写过程中在路由导航时，遇到了很多问题。在Typescript的路由配置难度上要高于Javascript。回顾一下解决该问题的过程，在Google上搜到了一篇文章并结合react-avigation官网。对于编写完好的程序，在
import {createAppContainer , createStackNavigator} from "react-navigation"; 的lib属性 createStackNavigator上代码检查报错。
然后强制执行yarn react-native run-andorid命令之后，看到报错具体内容
在这里插入图片描述
紧接着根据提示安装引用库，yarn add react-navigation-stack 之后又有很多报错，缺少这个库缺少那个库，react-native 命令不存在等等！

最终解决方案就是 提示缺少什么就装什么
大概需要安装的lib有（如有不足请继续安装）：yarn add react-native react-native-gesture-handler react-native-safe-area-context react-native-screens react-navigation react-navigation-stack
还有部分对应的类型声明（如有不足请继续安装）： yarn add @react-native-community/masked-view @react-navigation/native @react-navigation/stack @types/react @types/react-navigation
源码附赠展示，点击下载查看

package.json 的配置文件上的版本内容

react-native	react-navigation	@types/react-navigation	typescript	省略…
^0.61.5	^4.2.2	^3.4.0	3.7.3	省略…

成功运行之后的效果源码：

//APPEntrance.tsx
import React from 'react';
import {
   
  AppRegistry,
  Text,
  TouchableOpacity
} from 'react-native';
import AppContainer from './src/screens/AppContainer';

export default class HomeScreen extends React.Component {
   

  render() {
   
    return <AppContainer />
  }
}

//APPContainer.tsx
import React, {
    Component } from 'react';
import {
   
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  StatusBar,
  Image,
  Dimensions,
  ImageSourcePropType,
  ScaledSize,
  FlatList,
  TextInput
} from 'react-native';
import RespoList from './RespoList';
import {
   createAppContainer } from "react-navigation";
import {
    createStackNavigator, NavigationStackScreenProps } from 'react-navigation-stack';
import {
    TouchableOpacity } from 'react-native-gesture-handler';
import DeviceConfs from '../confs/DeviceConfs';
import ImgConfs from '../../src/confs/ImgConfs';

type AppProps = NavigationStackScreenProps;
class AppContainer extends React.Component<AppProps> {
   
  static navigationOptions = {
   
    title: '',
  };
 

  render(): React.ReactNode {
   
      return (<View style={
   {
   backgroundColo

最低0.47元/天解锁文章