本教程的靈感來自房地產模板，該模板使我們能夠構建功能齊全的，隨時可以部署的移動應用程序，任何人都可以用來構建自己的React Native應用程序。 本教程從React UI Kit的Camping Spots Finder應用程序克隆的Youtube視頻教程中復制了編碼實現和設計。 該視頻教程具有快速編碼和快速實現的功能，這對于初學者來說可能很難理解。 因此，本教程系列將視頻分為不同的部分。 它還提供了分步指南，任何人都可以輕松掌握和實現自己的應用程序。 在本教程系列的第一部分中，我們將實現地圖以及設置標題和標題選項卡，這些將為整個應用程序UI創建基礎。 這個想法是，首先要實現地圖視圖，然后是將所有部分分成不同功能的標題部分。 所以，讓我們開始吧！ 在本教程中，我們將使用EXPO作為React Native項目開發依賴項。 因此，首先，我們將使用expo客戶端創建樣板React Native應用程序。

創建樣板React Native項目

首先，由于我們將使用expo作為開發引擎，因此需要將其安裝到我們的系統中。 要將expo全局安裝到我們的系統中，我們需要首先安裝Node Package Manager（NPM）。 然后，我們需要運行以下命令： npm install -g expo 現在，我們需要使用expo創建樣板反應本機應用程序。 為此，我們需要在所需的項目目錄中運行以下命令： expo init <project\_name> // project name==> Camping Spots Finder 運行上述命令后，將要求我們選擇樣板應用程序的模板。 在這里，我們將選擇t ** abs **模板，該模板具有幾個示例屏幕和已配置的react-navigation。 下面提供了選擇屏幕截圖： 如我們所見，我們選擇選項卡模板，然后按Enter。 然后，我們需要輸入項目名稱，然后，將樣板反應本機應用程序配置到我們的目錄中。 現在，我們需要輸入項目目錄，然后運行命令： expo start 然后，我們將在模擬器屏幕中獲得以下樣板應用程序：

配置導航文件

我們已經在我們的項目中設置了用于導航目的的導航器。 但是現在，我們需要根據應用程序的要求配置導航器和導航文件。 因此，首先，我們需要在項目的“ / navigations”目錄中創建一個ScreensNavigator.js文件。 然后，我們需要在項目的“ / screens”目錄中創建一個Campings.js文件和Settings.js文件。 現在，我們的項目結構如下圖所示： 現在，我們需要從HomeScreen.js復制代碼并將其粘貼到Campings.js文件中。 同樣，我們需要從SettingsScreen.js到Settings.js Screen進行相同的操作，以便該項目現在可以在模擬器中正確運行。 現在，在ScreensNavigator.js文件中，我們需要配置導航器，包括“露營”和“設置”屏幕。 為此，我們需要使用react-navigation包中的createStackNavigator方法創建一個堆棧導航器，如下面的代碼片段所示： import React from 'react' ; import { createStackNavigator } from 'react-navigation' ;import Campings from '../screens/Campings' ; import Settings from '../screens/Settings' ;export default createStackNavigator({Campings : Campings,Settings : Settings, }); 在這里，我們已經將AppNavigator.js文件配置為我們的項目文件。 但是，我們需要使用新的ScreensNavigator重新配置AppNavigator.js文件。 為此，我們需要配置主AppNavigator.js文件，如下面的代碼片段所示： import React from 'react' ; import { createAppContainer, createSwitchNavigator } from 'react-navigation' ;import ScreensNavigator from './ScreensNavigator' ;export default createAppContainer(createSwitchNavigator({Main : ScreensNavigator, })); 現在，如果我們在模擬器中重新運行項目，則將獲得與以前相同的屏幕。

在Camping.js中創建地圖視圖

在這一步中，我們將為Camping.js文件中的React Native Camping Spots Finder克隆創建一個Map視圖。 為此，我們將使用為我們提供MapView組件的react-native-maps包。 首先，我們需要從Camping.js中刪除所有代碼。 然后，我們將從React和react-native包中導入所有必要的組件，如下面的代碼片段所示： import React from 'react' ; import {Image,Platform,ScrollView,StyleSheet,Text,TouchableOpacity,View, } from 'react-native' ; 現在，我們需要使用以下命令將react-native-maps軟件包安裝到我們的項目中： expo install react-native-maps 接下來，我們需要將react-native-maps包導入到Camping.js文件中，如下所示： import MapView from 'react-native-maps' ; 現在，為了將地圖包括到“露營”屏幕中，我們需要使用react-native-package提供的MapView組件，如下面的代碼片段所示： class Campings extends React . Component {render(){return (< View style = {styles.container} > <ScrollViewstyle={styles.container}contentContainerStyle={styles.contentContainer}><View style={styles.map}><MapView style={{flex: 1, height : 200, width : 200}} initialRegion={{latitude: 37.78825,longitude: -122.4324,latitudeDelta: 0.0922,longitudeDelta: 0.0421,}}/></View></ScrollView></View> );} } 在這里，我們將MapView組件綁定到某些樣式以及initialRegion道具。 initialRegion屬性允許我們設置地圖位置配置，如上面的代碼片段所示。 為了將地圖正確放置，有幾個View組件和一個ScrollView組件，它們用一些樣式包裝了MapView。 下面的代碼段提供了所需的樣式： const styles = StyleSheet.create({container : {flex : 1 ,backgroundColor : '#fff' ,},map :{flex : 1},contentContainer : {paddingTop : 30 ,}, }); 因此，我們在模擬器屏幕上得到以下結果：

配置地圖樣式

為了在屏幕上正確顯示地圖，我們將使用react-native軟件包提供的Dimensions組件。 通過使用Dimensions組件，我們可以獲得整個應用程序屏幕的高度和寬度。 然后，我們可以使用MapView對其進行配置，以在屏幕上正確顯示Map。 現在，讓我們按如下所示導入尺寸： import {Image,Platform,ScrollView,StyleSheet,Text,TouchableOpacity,View,Dimensions } from 'react-native' ; 現在，我們需要使用Dimensions組件中的get方法將高度和寬度常量設置為屏幕尺寸： const { width, height } = Dimensions.get( 'screen' ); 接下來，我們需要將高度和寬度尺寸添加到MapView組件中，以便在屏幕上正確配置它。 下面的代碼段提供了執行此操作的代碼： <MapView style={{ flex : 1 , height : height * 0.5 , width}} initialRegion={{latitude : 37.78825 ,longitude : -122.4324 ,latitudeDelta : 0.0922 ,longitudeDelta : 0.0421 ,}} /> 因此，我們在模擬器屏幕上得到以下結果： 如我們所見，我們已經在Camping應用程序屏幕中成功實現了地圖視圖。 現在，我們將向Camping應用程序屏幕添加自定義標題。

實施標頭部分

在本節中，我們將在MapView組件的頂部實現Header。 標頭將包含“露營地”位置名稱，右側帶有“設置”按鈕。 但是首先，我們需要刪除頂部的默認標題欄。 為此，我們需要在Campings.js文件中添加以下代碼： class Campings extends React . Component {static navigationOptions = {header : null ,}; 在導航器堆棧提供的navigationOptions中將標頭值設置為null時，頂部的默認標頭消失。 結果顯示在下面的模擬器屏幕截圖中： 如我們所見，默認標題消失了。 現在，我們將實現我們的自定義標題欄。

創建自定義標題

在這里，我們將實現Campings Spot Finder應用程序克隆的標頭部分。 標題部分包含一些圖標。 因此，對于圖標，讓我們使用以下代碼導入expo包本身提供的矢量圖標： import { FontAwesome , Ionicons} from '@expo/vector-icons' ; 在這里，我們將從expo包提供的vector-icons包中導入FontAwesome圖標包和Ionicons圖標包。 現在，我們將創建一個名為renderHeader（）的函數，該函數返回模板。 下面的代碼段提供了實現此功能的代碼： renderHeader() {return (< View style = {styles.header} > <View><FontAwesome name="location-arrow" size={14} color="white" /><Text>Detected Location</Text><Text>Northern Islands ()</Text></View><View><Ionicons name="ios-settings" size={24} color="black" /> </View></View>) } 在上面的代碼片段中，我們添加了一些Text組件和由View組件包裝的圖標。 然后，需要將therenderHeader（）函數調用到render（）函數中，如下面的代碼片段所示： render(){return (< View style = {styles.container} > <ScrollViewstyle={styles.container}contentContainerStyle={styles.contentContainer}>{this.renderHeader()} //here 因此，我們將在模擬器屏幕中獲得以下結果： 如我們所見，標頭部分位于MapView的頂部，但看起來并不吸引人。 因此，我們需要為其添加一些樣式，以使其看起來像“ Camping Spots Finder”應用程序中一樣酷。

向標題添加樣式和配置

在這里，我們將向標頭部分添加一些樣式配置，以使其看起來更具吸引力。 為了做到這一點，我們將使用許多樣式綁定。 這里使用了react-native樣式的flex屬性。 因此，我們可以深入了解如何使用flex屬性。 因此，下面的代碼片段中提供了實現此目的的代碼： renderHeader() {return (< View style = {styles.header} > <View style={{flex: 2, flexDirection: 'row'}}><View style={styles.settings}><View style={styles.location}><FontAwesome name="location-arrow" size={14} color="white" /></View></View><View style={styles.options}><Text style={{ fontSize: 12, color: '#A5A5A5', marginBottom: 5, }}>Detected Location</Text><Text style={{ fontSize: 14, fontWeight: '300', }}>Northern Islands</Text></View></View><View style={styles.settings}><TouchableOpacity ><Ionicons name="ios-settings" size={24} color="black" /></TouchableOpacity></View></View>)} 在上面的代碼片段中，設置Icon組件由TouchableOpacity組件包裝，以便使其可單擊。 然后，使用內聯以及來自樣式表的不同樣式綁定，以使標題部分具有適當的外觀。 以下代碼段提供了本節的樣式： header: {flex : 1 ,flexDirection : 'row' ,alignItems : 'center' ,justifyContent : 'center' ,height : height * 0.15 ,paddingHorizontal : 14 ,},location : {height : 24 ,width : 24 ,borderRadius : 14 ,alignItems : 'center' ,justifyContent : 'center' ,backgroundColor : '#FF7657' ,},settings : {alignItems : 'center' ,justifyContent : 'center' ,},options : {flex : 1 ,paddingHorizontal : 14 ,}, 結果，我們在模擬器屏幕中得到以下結果： 如我們所見，標題部分現在看起來很酷，并且很吸引人，左側有導航箭頭圖標，右側有設置圖標。 它用于顯示實際應用中檢測到的位置名稱。 在這里，我們在renderHeader（）函數中創建了標頭部分，該函數返回標頭部分模板。 這使我們項目的render（）方法中的代碼看起來更加清晰。 因此，讓我們實現MapView以及將要以函數樣式實現的其他部分。

將UI部分劃分為功能

這只是中間步驟，我們將把不同UI部分的編碼實現分成功能，以使render方法的代碼更少。 這將幫助我們更好地理解和閱讀代碼。 render（）方法將變得干凈，清除所有混合為一個的編碼段。 因此，讓我們完成這項工作。 首先，我們將MapView的代碼移至renderMap（）函數，如下面的代碼片段所示： renderMap(){return (< View style = {styles.map} > <MapView style={{flex: 1, height : height * 0.5, width}} initialRegion={{latitude: 37.78825,longitude: -122.4324,latitudeDelta: 0.0922,longitudeDelta: 0.0421,}}/></View> ) } 現在，renderMap（）方法將返回MapView組件模板。 然后，在接下來的教程中，我們將實現地圖組件下方的“列表”部分。 但是，首先讓我們為該部分創建一個名為renderList（）函數的單獨函數，該函數返回list部分的模板。 該功能在下面的代碼片段中提供： renderList(){return (< View > <Text>List of camping site here</Text> </ View >)} 在這里，我剛剛在View組件中添加了Text元素，我們將在本教程的下一部分中對其進行配置。 現在，我們需要將這些函數調用到項目的render（）方法上，如下面的代碼片段所示： render(){return (< View style = {styles.container} > <ScrollViewstyle={styles.container}contentContainerStyle={styles.contentContainer}>{this.renderHeader()} //for header section{this.renderMap()} //for MapView section{this.renderList()} //for List section</ScrollView> </ View >); } 因此，我們將在模擬器屏幕中獲得以下結果： 如我們所見，我們在屏幕上正確顯示了所有三個部分。 但是，對于本部分的教程，我們尚未完成。 我們將在標題部分和MapView部分之間再添加一個標題標簽部分。

實施標簽部分

在此步驟中，我們將在原標題中添加選項卡按鈕，如在原始Campings Spot Finder應用程序中所見。 為此，我們將創建另一個函數，該函數返回tabs部分的模板。 該函數名為renderTabs（），其實現在以下代碼段中提供： renderTabs(){return (< View > <View><Text>All Spots</Text></View><View><Text>Tenting</Text></View><View><Text>RV Camping</Text></View> </ View >) } 在這里，我們添加了一些由View組件包裝的Text元素。 然后，我們還需要在render（）函數中調用renderTabs（）函數： render(){return (< View style = {styles.container} > <ScrollViewstyle={styles.container}contentContainerStyle={styles.contentContainer}>{this.renderHeader()} //for header section {this.renderTabs()} //for tabs section{this.renderMap()} //for MapView section{this.renderList()} //for List section</ScrollView> </ View >);} 因此，我們在模擬器屏幕上得到以下結果： 如我們所見，標頭和??MapView部分之間有一部分，但看起來并不像選項卡。 為了使其看起來像一個選項卡，我們需要向其添加一些樣式和配置。

向“選項卡”部分添加樣式和配置

在這里，我們將樣式配置添加到選項卡部分，以使其看起來像選項卡。 為此，我們需要使用不同的樣式綁定，包括flex屬性。 填充和字體屬性。 下面的代碼段提供了實現此目的的代碼： renderTabs(){return (< View style = {styles.tabs} > <View style={styles.tab}><Text style={styles.tabTitle}>All Spots</Text></View><View style={styles.tab}><Text style={styles.tabTitle}>Tenting</Text></View><View style={styles.tab}><Text style={styles.tabTitle}>RV Camping</Text></View> </ View >) } 因此，如下面的模擬器屏幕截圖所示，我們獲得的標簽的外觀比以前更具吸引力： 如我們所見，我們在標題和地圖部分之間找到了標簽。 現在，我們需要做的是添加活動的標簽樣式以及配置以處理標簽的活動樣式。

配置活動標簽

在這里，我們將添加用于確定活動標簽的編碼實現。 首先，我們需要一個稱為active的狀態來處理active選項卡樣式屬性，如下面的代碼片段所示： state = { active : 'all' } 現在，我們需要創建一個函數來處理更改和狀態，并在單擊時將活動樣式設置為正確的選項卡。 為此，我們將創建一個名為handleTab（）的函數，該函數將制表符值作為參數，并在觸發時將活動狀態設置為制表符值。 以下代碼段提供了該函數的編碼實現： handleTab = ( tabKey ) => {this .setState({ active : tabKey });} 現在，我們需要為活動選項卡定義一些樣式。 然后，需要將此樣式配置綁定到renderTabs（）函數內的選項卡部分模板中的Text和View上。 下面的代碼段提供了活動選項卡所需的樣式： activeTab: {borderBottomColor : '#FF7657' ,},activeTabTitle : {color : '#FF7657' ,}, 上面給出的樣式將為活動選項卡的文本提供顏色，以及將活動選項卡圍在底部的邊框的View組件。 現在，我們需要包括這些樣式，并將其包含到renderTabs（）函數中，其值取決于選項卡的活動狀態。 然后，我們還需要將handleTab（）函數綁定到選項卡的Text組件的onPress事件。 函數調用還應根據選定的活動選項卡將參數設置為函數。 下面的代碼段提供了實現所有這些功能的代碼： renderTabs(){const {active} = this .statereturn (< View style = {styles.tabs} > <View style={[styles.tab, active === 'all' ? styles.activeTab : null]}><Text style={[styles.tabTitle, active === 'all' ? styles.activeTabTitle : null]}onPress={() => this.handleTab('all')}>All Spots</Text></View><View style={[styles.tab, active === 'tent' ? styles.activeTab : null]}><Text style={[styles.tabTitle, active === 'tent' ? styles.activeTabTitle : null]}onPress={() => this.handleTab('tent')}>Tenting</Text></View><View style={[styles.tab, active === 'rv' ? styles.activeTab : null]}><Text style={[styles.tabTitle, active === 'rv' ? styles.activeTabTitle : null]}onPress={() => this.handleTab('rv')}>RV Camping</Text></View> </ View >)} 因此，我們將在模擬器屏幕中獲得以下結果： 最后，我們在Camping Spots Finder應用程序克隆教程系列的這一部分中成功實現了標題部分，標題選項卡部分和MapView部分。

結論

這是我們的系列教程的第一部分，用于克隆Camping Spots Finder應用程序UI。 在本教程的一部分中，我們首先學習了如何使用expo設置樣板反應本地應用程序項目。 然后，我們學習了如何配置導航器，屏幕，以準備應用程序UI。 之后，我們逐步指導了如何使用react-native-maps包，帶有圖標的標題部分和具有活動標簽樣式的標題標簽部分來實現MapView。 我們還獲得了有關如何將UI部分分離為不同功能的獎勵指南，這些功能可返回所需模板以使代碼清晰。 教程系列的第一部分有點長，但是我們必須學習更多的知識，并為以后的部分設置基本的UI，這將使該系列更容易掌握和實現。 在下一部分中，我們將實現在本教程前面的列表部分，我們將其分成一個函數，并設置到設置屏幕的導航。 所以，敬請關注！！

揭露

這篇文章包括會員鏈接； 如果您通過本文提供的不同鏈接購買產品或服務，我可能會獲得賠償。 帶有“ React Native＃1：地圖視圖” UI的Camping Spots Finder應用程序UI克隆首先出現在Kriss上 。

From: https://hackernoon.com/camping-spots-finder-app-ui-clone-with-react-native-1-map-view-ui-8muy303x

總結

以上是生活随笔為你收集整理的[React Native Development] Camping Spots Finder应用程序用户界面克隆第一部分-地图视图用户界面...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。