如何构建React-Native图片库教程

引言

React-Native允许您使用JavaScript和React创建原生移动应用程序，它遵循与React相同的设计，这意味着您可以创建组件并将这些组件组合成其他组件。

React Native已经提供了原生移动组件，例如iOS中的UITextView或Android中的TextView。这一点很重要，因为我们不会在移动应用程序中使用Web应用程序，而是会创建一个原生应用程序。

React Native 架构

React Native 的架构由 3 个主要组件组成

• 原生代码 / 模块， 这些元素是用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://fbdocs.cn/react-native/docs/getting-started.html

项目结构：文件和文件夹结构。

创建并初始化项目后，我们可以看到React Native已经创建了一个主文件夹，其中包含开发应用程序所需的所有文件。

让我们关注项目文件的结构

android和iOS文件夹是包含我们应用程序在每个平台上的“原生”文件的文件夹。我们将用于我们应用程序的各种库保存在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/ 并点击 Sign up。

步骤 2：注册我们的信息，然后会收到一封包含密码的电子邮件。

步骤 3：一旦 flickr 欢迎我们，我们将进入 create an App ，然后 Get your API Key in Request an API Key。

步骤 4：在此步骤中，您必须定义如何选择API “commercial” 或 “Non commercial”，在此情况下，我选择 Non commercial。

步骤 5：注册您的应用程序信息，接受条款，然后 submit。

完成！立即它会给我们 Key 和我们的 secret key。

将它们放在手边，因为我们稍后会用到它们。

流程图

处理图像

我们要做的第一件事是从服务器检索数据，为此我们将使用一个名为 "axios" (https://github.com/axios/axios) 的库。为了安装 axios ，我们将在我们的项目上键入以下命令

$  npm  install  axios

输出将是这样的

现在我们需要将 axios 导入到我们的App组件中。为此，我们将我们在当前导入语句下方添加一个新的导入语句

接下来要做的是我们需要调用一个端点，在这种情况下Flickr，我们将使用以下端点：https://www.flickr.com/services/api/flickr.photos.search.html

对于这个端点，我们需要提供一个API_KEY，这个过程在上面已经描述过了。我们还将包含一些其他参数来完成我们的搜索。

我们将添加一个新的const在我们的导入语句下方，其中包含我们从Flickr获得的API Key

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

在chrome中打开开发者工具

重要的是要注意“axios”返回一个包含“data”属性的对象。这个属性是我们需要的，在这种情况下是照片，我们也可以检查“stat”来确定请求是否有错误。

我们将更改App的样式，以呈现一个“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的data属性定义为 this.state.images，这是组件状态，我们必须在构造函数中定义它，以便设置属性，否则我们将得到undefined作为值。

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 添加到我们的render中

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

需要注意的是，我们正在使用一个 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，并在模拟器中运行了应用程序。