[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
~~~
