[TOC]
# 创建项目
~~~
npx react-native init douyin
~~~
# 安装 React Navigation
## 安装基础包
~~~
yarn add @react-navigation/native
~~~
## 安装依赖包
~~~
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
~~~
## 首页配置
在首页（index.js）的第一行添加
~~~
import 'react-native-gesture-handler';
~~~
## 安装导航器
~~~
yarn add @react-navigation/stack
yarn add @react-navigation/bottom-tabs
~~~
# 安装图标库
## 安装包
~~~
yarn add react-native-vector-icons
~~~
## 配置
在 Android 系统中要使用图标需要配置。
修改 `android/app/build.gradle` 文件，添加一行到最后：
~~~
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
~~~
# 安装 ViewPager
可以实现屏幕滑动的库。
~~~
yarn add @react-native-community/viewpager
~~~
# 安装拍照录像包
## 安装包
~~~
yarn add react-native-image-crop-picker
~~~
## 配置1
修改 `android/build.gradle` 文件。
找到 `allprojects` 配置项，添加
~~~
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url "$rootDir/../node_modules/react-native/android" }
// 添加这行
maven { url 'https://maven.google.com' }
...
}
}
~~~
## 配置2
修改 `android/app/build.gradle` 文件
~~~
android {
...
defaultConfig {
...
vectorDrawables.useSupportLibrary = true
...
}
...
}
~~~
## 配置3、添加权限
修改 `app/src/main/AndroidManifest.xml` 文件。
添加三行
* `<uses-permission android:name="android.permission.CAMERA"/>`
* `<uses-feature android:name="android.hardware.camera" android:required="false" />`
* `<uses-feature android:name="android.hardware.camera.front" android:required="false" />`
# 安装视频播放器
~~~
yarn add react-native-video
~~~
# 安装tabview
~~~
yarn add react-native-scrollable-tab-view
~~~
