React Native创建一个新的项目常用命令_reactnative0.59 react-native-pager-view

创建项目

创建一个typescript项目

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

导入库

整合

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

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
1

需要手动配置的库

大部分时候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
1

不然不会生效。

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
1

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

AsyncStorage

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

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

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

react-native-animatable

React Native 的声明式过渡和动画

yarn add react-native-animatable
1

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

react-native-paper

yarn add react-native-paper
1

react-native-root-siblings

yarn add react-native-root-siblings
1

@ant-design/react-native

expo install @ant-design/react-native
1

react-native-root-toast

yarn add react-native-root-toast
1

base-64

yarn add base-64
1

react navigation

yarn add @react-navigation/native
1

expo install react-native-screens react-native-safe-area-context
1

yarn add @react-navigation/native-stack
1

yarn add @react-navigation/bottom-tabs
1

expo install react-native-reanimated
expo install react-native-gesture-handler
yarn add @react-navigation/drawer
1
2
3

expo-linking

expo install expo-linking
1

expo-linear-gradient

expo install expo-linear-gradient
1

react-native-pager-view

yarn add react-native-pager-view
1

Material Bottom Tabs Navigator

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

ant

yarn add @react-native-community/segmented-control
1

yarn add @react-native-community/cameraroll
yarn add @react-native-picker/picker
1
2

React Native 篇

react-native-animatable

React Native 的声明式过渡和动画

yarn add react-native-animatable
1

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

yarn add react-native-linear-gradient
1

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