使用反應本機元素和博覽會克隆火種

>該教程通過使用React Antive Elements和Expo來指導您通過構建Tinder Clone，重點是為移動設備創建像素完美的佈局。 我們將構建四個關鍵屏幕：主頁，首選，個人資料和消息。

密鑰功能：

• >利用反應的本機元素用於流線型跨平台樣式（Android，ios，web）。
>
• >利用Expo進行簡化的項目設置和執行。
>
• >使用React Navigation實施自定義導航和選項卡欄。 >
使用
• > tinder式卡片。 react-native-deck-swiper> 用紗線有效地管理資產和依賴項。
>

>先決條件： 假定基本的反應本地知識和博覽會知識。您將需要移動設備或模擬器上的Expo客戶端，以及已安裝的紗線和>。 本教程使用節點11.14.0，NPM 6.4.1，紗線1.15.2和Expo 2.16.1（根據需要更新）。

項目設置：expo-cli

創建一個新的Expo項目：（選擇“ TABS”模板）。

>安裝依賴項：
1. expo init expo-tinder
2. yarn install

反應本機元素集成：>

>安裝反應本機元素：

構建UI：>

>教程詳細介紹了每個屏幕的創建，包括：yarn add react-native-elements>

>主屏幕：

使用

用於滑動卡（

component）。 虛擬數據從

>。

• 頂級選拔屏幕：react-native-deck-swiper使用Card's constants/Pics.js組件顯示可滾動的配置卡網格。 來自

  。
的數據

• 消息屏幕屏幕：react-native-elements使用Tile>'s constants/Pics.js組件介紹了消息列表。來自。

  的數據

• 配置文件屏幕：顯示了帶有圖像，詳細信息和社交媒體鏈接的用戶配置文件。利用react-native-elements>組件和自定義樣式。 ListItem constants/Messages.js

>教程為每個屏幕提供代碼片段，以及說明和样式細節。 請記住要在GitHub存儲庫中包含必要的資產圖像。
• >

  react-native-elements

  導航設置：

>教程修改了默認選項卡導航（MainTabNavigator.js），以包括四個屏幕，使用自定義TabBarIcon組件自定義圖標，並使用headerMode: 'none'>刪除默認標題。 SafeAreaView用於確保設備安全區域內的適當渲染。

完整的代碼可在GitHub上找到。 該教程以常見問題解答涵蓋UI自定義，功能添加，Firebase集成，部署，性能優化，安全性，貨幣化，數據處理，測試和更新。

以上是使用反應本機元素和博覽會克隆火種的詳細內容。更多資訊請關注PHP中文網其他相關文章！