目錄

介紹

React Native架構

技術棧

Redux中的元件

建立react-native專案：第一步

安裝Xcode

安裝Node

安裝React Native

建立一個新的應用程式

應用程式設計：流程圖

建立元件

從API載入資料：Flickr

流程圖

使用影象

---

在本文中，我們使用react-native構建了一個影象庫，我們定義了一些堆疊，我們使用flickr API並在模擬器中執行應用程式。

介紹

React-Native允許您使用JavaScript和React建立本地移動應用程式，它遵循與React相同的設計，這意味著您可以建立元件並從其他元件組成這些元件。

React Native為您提供了可在原生移動元件上生成的元件，例如iOS中的UITextView或Android中的TextView。這很重要，因為我們的移動應用程式中不會有Web應用程式，而是我們將擁有本地應用程式。

React Native架構

React Native的架構由3個主要組成部分組成：

• Native Code / Modules，這些元素是在Java（Android）或Objective C（iOS）上編寫的原生代碼。
• React Native Bridge負責本地和JavaScript執行緒之間的通訊。
• JavaScript VM是一個虛擬機器，它執行我們所有
  JavaScript程式碼，並最後執行。

技術棧

在開始編碼之前，我們必須簡要說明構建應用程式所需的一些工具：

Node.js是一個開發應用程式的開源平臺，它聚焦實時性。它對於具有高併發性的應用程式非常有用。它使用JavaScript作為程式語言和非同步和麵向物件的程式設計模式。

Npm包管理器，允許我們安裝我們需要的依賴項/包。

ES6作為任何語言，Javascript也有名為ECMAScript的版本（ES的縮寫）。是新的JavaScript標準。

Babel是一個JS轉換器，可以將新的JS程式碼轉換為舊的程式碼。一種轉換和編譯程式碼的工具。這意味著它允許我們使用

EcmaScript的最新功能編寫程式碼，該程式碼將被轉換為與任何瀏覽器都相容

Redux “是JavaScript應用程式的可預測狀態容器”，這意味著應用程式的完整狀態儲存在“Store”中。

Redux中的元件

Store：它是所有事物的中心和事實，具有更新，獲取和收聽資料的方法。

Actions：這些是將資料從應用程式傳送到儲存（Store）的資訊塊。

Reducers：是指定操作（Actions）如何更改應用程式狀態的函式。

建立react-native專案：第一步

這一點很有趣，因為我們必須記住，我們將擁有不同的環境：開發作業系統：macOS，Windows，Linux。

目標作業系統：iOS，Android。

只有從Mac我們才能使用iOS和Android。

在Windows和Linux中，我們將配置環境以使用Android Studio。

因此，讓我們從iOS開始準備環境以便能夠建立我們的應用程式。

安裝Xcode

要模擬iOS應用程式，我們需要Apple的開發軟體Xcode。安裝它的最簡單方法是通過Mac App Store。安裝Xcode還將安裝所有必要的工具來構建我們的iOS應用程式。https://itunes.apple.com/us/app/xcode/id497799835?mt=12

安裝Node

在Mac上，您可以使用Homebrew輕鬆安裝，而無需手動下載並安裝它，因為最後一個程式有時會出現問題。安裝node的命令是：

安裝React Native

一旦我們在計算機上安裝了node，我們就可以通過啟動以下命令來安裝React Native：

建立一個新的應用程式

使用React Native命令列介面生成名為“imageGallery”的新React Native專案：

老實說，最好的指南在官方文件中： https://facebook.github.io/react-native/docs/getting-started.html

專案結構：檔案和資料夾的結構。

建立並初始化專案後，我們可以看到React Native建立了一個主資料夾，其中包含開發應用程式所需的所有檔案。

讓我們關注專案檔案的結構：

android和iOS的資料夾是包含每個平臺中我們的應用程式的“native檔案的資料夾。我們將用於應用程式的不同庫儲存在node_modules目錄中。

應用程式設計：流程圖

建立元件

元件是React的主要部分，它們具有屬性，狀態，生命週期等。主要元件將是檢視，文字和影象。

正如我們之前提到的，App.js 是react-init已經建立的主要元件。

使用標記<View/> ，我們將替換html中的<div/> 標記。

在<Text/> 的情況下，它取代段落，標題等。

而使用<Image/> 我們可以包括影象。

在React Native中，我們將使用模擬器代替瀏覽器來檢視內容。

好吧，我們必須說，為了給我們的影象賦予維度，我們需要匯入並呼叫元件StyleSheet 。 這允許我們建立一個物件，在該物件中我們將編寫樣式，並且我們可以通過其屬性style新增到我們的元件中。

從API載入資料：Flickr

要開始從flickr頁面中提取資訊，我們需要：

步驟1：進入https://www.flickr.com/services/api/並單擊“ 註冊” 。

第2步：註冊我們的資訊，然後將收到一封帶著密碼的電子郵件。

第3步：一旦flickr歡迎我們，我們將建立一個應用程式， 然後在請求中獲取您的API金鑰。

步驟4：對於此步驟，您必須定義如何選擇API “商業”或“非商業”，在這種情況下，我選擇非商業。

第5步：註冊您的應用程式的資訊，接受和提交條款。

準備好了！他馬上給了我鑰匙和我們的祕金鑰匙。

保持他們靠近，因為我們稍後會使用它們。

流程圖

使用影象

我們要做的第一件事是從伺服器檢索資料，為了實現這點，我們將使用名為“axios”的庫（https://github.com/axios/axios）。為了安裝axios，我們將在專案中鍵入以下命令：

$  npm  install  axios

輸出將是這樣的：

現在我們需要將axios匯入我們的App元件。為此，我們將在當前的import語句下面寫一個新的import語句：

接下來要做的是我們需要呼叫端點，在這種情況下Flickr將使用以下端點：https：//www.flickr.com/services/api/flickr.photos.search.html

對於此端點，我們需要提供API_KEY，此過程如上所述。我們還將包含一些其他引數來完成我們的搜尋。

我們將使用從Flickr獲得的API金鑰在我們的import語句下面新增新的const

const API_KEY = 'TypeYourAPIKeyHere'

我們將定義一個名為imageSearch的新方法，它將接收一個文字作為引數，這將是呼叫伺服器並返回影象的方法。首先我們需要知道我們要呼叫的地址，然後我們將從伺服器獲取資訊，最後我們將在螢幕上顯示影象。

imageSearch(text) {
    // 1. Build URL endpoint
    const urlEndpoint = `https://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=${API_KEY}&format=json&text=.
    ${text}&nojsoncallback=true&per_page=20&extras=url_s`
    // 2. Request data axios.get(urlEndpoint)
    .then((response) => { console.log(response)
    }).catch((error) => { console.log(error)
    })
}

如果您使用chrome上的CMD + D選項除錯應用程式，您可以看到類似這樣的內容。CMD + D.

在chome開放開發者工具上：

重要的是要注意“ axios”返回一個包含名為“ data” 的屬性的物件，該屬性是包含我們需要的資訊的屬性，在這種情況下是照片，我們也可以檢查“ stat”以確定請求是否有錯誤。

我們將更改應用程式的樣式，以便顯示“ FlatList”元件刪除不需要的項：

const styles = StyleSheet.create({ container: {
flex: 1,
backgroundColor: '#F3F3F3',
},
image: {
width: (Dimensions.get('window').width / 2) - 20,
height: 150,
margin: 10,
},
flatListStyle: { flex: 1,
}
});

現在我們使用Dimensions，這個物件來自react-native名稱空間，它提供了螢幕的寬度。

如果你執行應用程式，它看起來像：

正如您所看到的，影象位於左上角並位於狀態列上，為避免這種情況，我們在react-native名稱空間中提供了另一個類“ SafeAreaView”，如下所示：

render() { 
  return (
  <SafeAreaView style={styles.container}>
    <View>
    <Image 
      source={{uri:'https://s3.amazonaws.com/crisoforo.com/flowers.jpg'}} 
      style={styles.image} />
    </View>
  </SafeAreaView>
);
}

這將解決問題，影象將正確定位。

我們將更改App的render方法的內容，以包含FlatList：

<SafeAreaView style={styles.container}>
<View style={styles.container}>
<FlatList style={styles.flatListStyle} data={this.state.images} numColumns={2} renderItem={({item})=>{ return (
<View>
<Image style={styles.image} source={{uri: item.url_s}} />
</View>
)}
} />
</View>
</SafeAreaView>

正如您所看到的，我們已經將FlatList資料的屬性定義為this.state.images，這是我們必須定義建構函式的元件狀態，以便設定屬性，否則我們將得到未定義為值。

constructor(props) { super(props)
// Set the default state this.state = {
images: []
}
// Get some images this.imageSearch('cat')
}

在建構函式中，我們將images陣列定義為空，但是我們需要在從伺服器獲取影象後重新整理元件，我們將使用setState方法執行該操作，我們只是用我們在axios上的then函式中的方法呼叫此方法

imageSearch(text) {
// 1. Build URL endpoint
const urlEndpoint = `https://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=${API_KEY}&format=json&text=${text}&nojsoncallback=true&per_page=20&extras=url_s`
// 2. Request data axios.get(urlEndpoint)
.then((response) => { console.log(response) this.setState({
images: response.data.photos.photo
})
}).catch((error) => { console.log(error)
})
}

如果我們現在執行應用程式，我們將看到如下內容：

使用者應該能夠搜尋影象，我們將在渲染上新增一個TextInput：

<SafeAreaView style={styles.container}>
<View style={styles.container}>
<TextInput style={styles.search} placeholder={'Search'} value={this.state.searchTerm} onChangeText={(text)=> { this.setState({
searchTerm: text
})
this.imageSearch(text) }} />
<FlatList style={styles.flatListStyle} data={this.state.images} numColumns={2} renderItem={({item})=>{ return (
<View>
<Image style={styles.image} source={{uri: item.url_s}} />
</View>
)}
} />
</View>

重要的是要注意我們正在使用a state.searchTerm但我們還沒有定義它，所以我們需要在建構函式上宣告它：

constructor(props) { super(props)
// Set the default state this.state = {
images: [], searchTerm: ''
}
// Get some images this.imageSearch('earth')
}

此外，TextInput的樣式被新增到了StyleSheet.create最後

const styles = StyleSheet.create({ container: {
flex: 1,
backgroundColor: '#F3F3F3',
},
image: {
width: (Dimensions.get('window').width / 2) - 20,
height: 150,
margin: 10,
},
flatListStyle: { flex: 1,
},
search: { height: 30,
marginLeft: 10,
marginRight: 10,
fontSize: 20,
marginTop: 10
}
});

如果我們重新整理應用程式，我們將看到如下內容：

程式碼位置

您可以在以下位置找到程式碼：

https://gitlab.itexico.com/groups/blogposts

結論

我們使用react-native構建了一個影象庫，我們定義了一些堆疊，我們使用flickr API並在模擬器中執行應用程式。

 

原文地址：https://www.codeproject.com/Articles/1267698/How-to-Build-a-React-Native-Image-Gallery-Tutorial