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

創(chuàng)建樣板React Native項目

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

配置導(dǎo)航文件

我們已經(jīng)在我們的項目中設(shè)置了用于導(dǎo)航目的的導(dǎo)航器。 但是現(xiàn)在，我們需要根據(jù)應(yīng)用程序的要求配置導(dǎo)航器和導(dǎo)航文件。 因此，首先，我們需要在項目的“ / navigations”目錄中創(chuàng)建一個ScreensNavigator.js文件。 然后，我們需要在項目的“ / screens”目錄中創(chuàng)建一個Campings.js文件和Settings.js文件。 現(xiàn)在，我們的項目結(jié)構(gòu)如下圖所示： 現(xiàn)在，我們需要從HomeScreen.js復(fù)制代碼并將其粘貼到Campings.js文件中。 同樣，我們需要從SettingsScreen.js到Settings.js Screen進行相同的操作，以便該項目現(xiàn)在可以在模擬器中正確運行。 現(xiàn)在，在ScreensNavigator.js文件中，我們需要配置導(dǎo)航器，包括“露營”和“設(shè)置”屏幕。 為此，我們需要使用react-navigation包中的createStackNavigator方法創(chuàng)建一個堆棧導(dǎo)航器，如下面的代碼片段所示： 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, }); 在這里，我們已經(jīng)將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, })); 現(xiàn)在，如果我們在模擬器中重新運行項目，則將獲得與以前相同的屏幕。

在Camping.js中創(chuàng)建地圖視圖

在這一步中，我們將為Camping.js文件中的React Native Camping Spots Finder克隆創(chuàng)建一個Map視圖。 為此，我們將使用為我們提供MapView組件的react-native-maps包。 首先，我們需要從Camping.js中刪除所有代碼。 然后，我們將從React和react-native包中導(dǎo)入所有必要的組件，如下面的代碼片段所示： import React from 'react' ; import {Image,Platform,ScrollView,StyleSheet,Text,TouchableOpacity,View, } from 'react-native' ; 現(xiàn)在，我們需要使用以下命令將react-native-maps軟件包安裝到我們的項目中： expo install react-native-maps 接下來，我們需要將react-native-maps包導(dǎo)入到Camping.js文件中，如下所示： import MapView from 'react-native-maps' ; 現(xiàn)在，為了將地圖包括到“露營”屏幕中，我們需要使用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屬性允許我們設(shè)置地圖位置配置，如上面的代碼片段所示。 為了將地圖正確放置，有幾個View組件和一個ScrollView組件，它們用一些樣式包裝了MapView。 下面的代碼段提供了所需的樣式： const styles = StyleSheet.create({container : {flex : 1 ,backgroundColor : '#fff' ,},map :{flex : 1},contentContainer : {paddingTop : 30 ,}, }); 因此，我們在模擬器屏幕上得到以下結(jié)果：

配置地圖樣式

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

實施標頭部分

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

創(chuàng)建自定義標題

在這里，我們將實現(xiàn)Campings Spot Finder應(yīng)用程序克隆的標頭部分。 標題部分包含一些圖標。 因此，對于圖標，讓我們使用以下代碼導(dǎo)入expo包本身提供的矢量圖標： import { FontAwesome , Ionicons} from '@expo/vector-icons' ; 在這里，我們將從expo包提供的vector-icons包中導(dǎo)入FontAwesome圖標包和Ionicons圖標包。 現(xiàn)在，我們將創(chuàng)建一個名為renderHeader（）的函數(shù)，該函數(shù)返回模板。 下面的代碼段提供了實現(xiàn)此功能的代碼： 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（）函數(shù)調(diào)用到render（）函數(shù)中，如下面的代碼片段所示： render(){return (< View style = {styles.container} > <ScrollViewstyle={styles.container}contentContainerStyle={styles.contentContainer}>{this.renderHeader()} //here 因此，我們將在模擬器屏幕中獲得以下結(jié)果： 如我們所見，標頭部分位于MapView的頂部，但看起來并不吸引人。 因此，我們需要為其添加一些樣式，以使其看起來像“ Camping Spots Finder”應(yīng)用程序中一樣酷。

向標題添加樣式和配置

在這里，我們將向標頭部分添加一些樣式配置，以使其看起來更具吸引力。 為了做到這一點，我們將使用許多樣式綁定。 這里使用了react-native樣式的flex屬性。 因此，我們可以深入了解如何使用flex屬性。 因此，下面的代碼片段中提供了實現(xiàn)此目的的代碼： 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>)} 在上面的代碼片段中，設(shè)置Icon組件由TouchableOpacity組件包裝，以便使其可單擊。 然后，使用內(nèi)聯(lián)以及來自樣式表的不同樣式綁定，以使標題部分具有適當(dāng)?shù)耐庥^。 以下代碼段提供了本節(jié)的樣式： 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 ,}, 結(jié)果，我們在模擬器屏幕中得到以下結(jié)果： 如我們所見，標題部分現(xiàn)在看起來很酷，并且很吸引人，左側(cè)有導(dǎo)航箭頭圖標，右側(cè)有設(shè)置圖標。 它用于顯示實際應(yīng)用中檢測到的位置名稱。 在這里，我們在renderHeader（）函數(shù)中創(chuàng)建了標頭部分，該函數(shù)返回標頭部分模板。 這使我們項目的render（）方法中的代碼看起來更加清晰。 因此，讓我們實現(xiàn)MapView以及將要以函數(shù)樣式實現(xiàn)的其他部分。

將UI部分劃分為功能

這只是中間步驟，我們將把不同UI部分的編碼實現(xiàn)分成功能，以使render方法的代碼更少。 這將幫助我們更好地理解和閱讀代碼。 render（）方法將變得干凈，清除所有混合為一個的編碼段。 因此，讓我們完成這項工作。 首先，我們將MapView的代碼移至renderMap（）函數(shù)，如下面的代碼片段所示： 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> ) } 現(xiàn)在，renderMap（）方法將返回MapView組件模板。 然后，在接下來的教程中，我們將實現(xiàn)地圖組件下方的“列表”部分。 但是，首先讓我們?yōu)樵摬糠謩?chuàng)建一個名為renderList（）函數(shù)的單獨函數(shù)，該函數(shù)返回list部分的模板。 該功能在下面的代碼片段中提供： renderList(){return (< View > <Text>List of camping site here</Text> </ View >)} 在這里，我剛剛在View組件中添加了Text元素，我們將在本教程的下一部分中對其進行配置。 現(xiàn)在，我們需要將這些函數(shù)調(diào)用到項目的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 >); } 因此，我們將在模擬器屏幕中獲得以下結(jié)果： 如我們所見，我們在屏幕上正確顯示了所有三個部分。 但是，對于本部分的教程，我們尚未完成。 我們將在標題部分和MapView部分之間再添加一個標題標簽部分。

實施標簽部分

在此步驟中，我們將在原標題中添加選項卡按鈕，如在原始Campings Spot Finder應(yīng)用程序中所見。 為此，我們將創(chuàng)建另一個函數(shù)，該函數(shù)返回tabs部分的模板。 該函數(shù)名為renderTabs（），其實現(xiàn)在以下代碼段中提供： renderTabs(){return (< View > <View><Text>All Spots</Text></View><View><Text>Tenting</Text></View><View><Text>RV Camping</Text></View> </ View >) } 在這里，我們添加了一些由View組件包裝的Text元素。 然后，我們還需要在render（）函數(shù)中調(diào)用renderTabs（）函數(shù)： 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 >);} 因此，我們在模擬器屏幕上得到以下結(jié)果： 如我們所見，標頭和??MapView部分之間有一部分，但看起來并不像選項卡。 為了使其看起來像一個選項卡，我們需要向其添加一些樣式和配置。

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

在這里，我們將樣式配置添加到選項卡部分，以使其看起來像選項卡。 為此，我們需要使用不同的樣式綁定，包括flex屬性。 填充和字體屬性。 下面的代碼段提供了實現(xiàn)此目的的代碼： 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 >) } 因此，如下面的模擬器屏幕截圖所示，我們獲得的標簽的外觀比以前更具吸引力： 如我們所見，我們在標題和地圖部分之間找到了標簽。 現(xiàn)在，我們需要做的是添加活動的標簽樣式以及配置以處理標簽的活動樣式。

配置活動標簽

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

結(jié)論

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

揭露

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。