React Native创建一个新的项目常用命令

创建项目

创建一个typescript项目

npx react-native init ywh --template react-native-template-typescript

导入库

整合

方便一键安装,以下仅是本人常用的组件,可以按需增减

yarn add react-native-webview @react-native-async-storage/async-storage react-native-animatable react-native-paper react-native-root-siblings react-native-root-toast base-64 @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack @react-navigation/bottom-tabs react-native-reanimated react-native-gesture-handler @react-navigation/drawer @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons react-native-pager-view react-native-animatable react-native-linear-gradient @ant-design/icons-react-native

需要手动配置的库

大部分时候iOS端只要pod install就行了,而安卓需要手动修改一些代码或者配置文件。我把需要配置的地方列出来,防止遗忘。

react-navigation

配置方法见:https://reactnavigation.org/docs/getting-started/

react-native-reanimated

https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/
这里有一个小坑,设置完成了后,要执行一下

yarn start --reset-cache

不然不会生效。

react-native-vector-icons

https://github.com/oblador/react-native-vector-icons#android

@ant-design/icons-react-native

https://blog.csdn.net/lxyoucan/article/details/108334465

详细

WebView

react-native-webview提供WebView在本机视图中呈现 Web 内容的组件。

expo install react-native-webview

https://docs.expo.io/versions/latest/sdk/webview/

AsyncStorage

一个异步的、未加密的、持久的、键值存储 API。

expo install @react-native-async-storage/async-storage

https://docs.expo.io/versions/latest/sdk/async-storage/

react-native-animatable

React Native 的声明式过渡和动画

yarn add react-native-animatable

https://github.com/oblador/react-native-animatable

react-native-paper

yarn add react-native-paper

react-native-root-siblings

yarn add react-native-root-siblings

@ant-design/react-native

expo install @ant-design/react-native

react-native-root-toast

yarn add react-native-root-toast

base-64

yarn add base-64

react navigation

yarn add @react-navigation/native
expo install react-native-screens react-native-safe-area-context
yarn add @react-navigation/native-stack
yarn add @react-navigation/bottom-tabs
expo install react-native-reanimated
expo install react-native-gesture-handler
yarn add @react-navigation/drawer

expo-linking

expo install expo-linking

expo-linear-gradient

expo install expo-linear-gradient

react-native-pager-view

yarn add react-native-pager-view

Material Bottom Tabs Navigator

yarn add @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons

ant

yarn add @react-native-community/segmented-control
yarn add @react-native-community/cameraroll
yarn add @react-native-picker/picker

React Native 篇

react-native-animatable

React Native 的声明式过渡和动画

yarn add react-native-animatable

https://github.com/oblador/react-native-animatable

yarn add react-native-linear-gradient

https://github.com/react-native-linear-gradient/react-native-linear-gradient

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值