如何构建React-Native图库教程

在 的情况下，它取代段落，标题等。

而使用 我们可以包括图像。

在React Native中，我们将使用模拟器代替浏览器来查看内容。

好吧，我们必须说，为了给我们的图像赋予维度，我们需要导入并调用组件StyleSheet 。 这允许我们创建一个对象，在该对象中我们将编写样式，并且我们可以通过其属性style添加到我们的组件中。

要开始从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 (
  
    
    {uri:'https://s3.amazonaws.com/crisoforo.com/flowers.jpg'}} 
      style={styles.image} /
    
  
);
}

这将解决问题，图像将正确定位。

我们将更改App的render方法的内容，以包含FlatList：

{ return (

{uri: item.url_s}} /

)}
} />

正如您所看到的，我们已经将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：

 { this.setState({
searchTerm: text
})
this.imageSearch(text) }} />
{ return (

{uri: item.url_s}} /

)}
} />

重要的是要注意我们正在使用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