教程:更多关于mturk api和react本机用于构建移动应用程序(第2部分)

二月,我们发布了一个由三部分组成的系列(第1部分,,第2部分,,第3部分)关于react javascript库,一个由Facebook维护的开源框架,Instagram,以及一个由企业和开发人员组成的社区。react帮助开发人员构建用户界面(uis),并使其易于管理ui交互。

上周,我们向读者介绍了如何回应本地人,一个允许您构建本地移动应用程序的框架(Android,iOS)使用JavaScript和React。我们构建了第一个移动应用程序,称为AmazonMechanical Turk(MTURK)应用程序编程接口(万博体育网址API),以获得我们的账户余额。

今天,我们将通过展示如何使用第三方组件来构建我们的React原生移动应用程序。我们将调用mturk方法来检索类似listHits的结果,并使用这些组件将它们显示在我们的应用程序中。

入门

我们将从上周的教程中遗漏的地方开始构建。如果你需要被抓住,您可以访问该教程在这里.

我们将使用名为反应本机元素.要安装它,导航到您的mturk移动应用程序目录,并在终端提示下键入以下命令:

npm安装react本机元素—保存

一旦完成,您应该看到与以下类似的输出:

$npm安装react本机元素—保存
mturk移动应用程序@0.1.0/用户/johndoe/mturk移动应用程序
react native elements@0.19.0
——罗达什.IsEmpty@4.4.0
——罗达什.times@4.3.2
opencollective@1.0.3
Babel Polyfill@6.23.0
│——再生器运行时间@0.10.5
粉笔@1.1.3
│——ANSI样式@2.2.1
剥离ANSI@3.0.1
*****——ansi regex@2.1.1
│——支持颜色@2.0.0
查询器@3.0.6
——ansi在1.4.0时逃逸
│——Rx@4.1.0
——节点取数@1.6.3

然后,打开app.js并添加行以下用粗体显示您的代码:

从“react”导入react;;
导入样式表,文本,视图,,扁平表}来自'react native';;
从“aws sdk/dist/aws sdk react native”导入aws;;
导入列表项,“react native elements”的标题;;

注意上面第二行的列表中添加了Flatlist。我们需要补充一下,同样,因为我们马上就要在我们的应用程序中使用最近引入的flatlist组件了。

这就是依赖性和配置。现在调用ListHits并将结果添加到我们的React Native应用程序的状态。

在mturk api中调用listHits

下一步,一旦我们的移动应用程序组件挂载,我们将调用listhits。我们熟悉这一点有两个原因:首先,当我们的移动应用程序挂载时调用mturk API正是我们在最后教程以获取我们的mturk帐户余额。我们会在这里做同样的事情,除了ListHits。第二,应该很熟悉,因为这是我们在同一个关于react的教程中应用的相同模式(而不是react native)。在那个教程,我们引入了一个方法调用getmturkhits,它将调用mturk API中的listHits,并将结果存储在反应状态。我们要在这里做同样的事情,但对于本地人来说。你应该在这里看到很多熟悉的概念。

首先添加以下代码用粗体到app.js文件:

建造师(道具){
超级(道具);;
这个状态={
平衡:“,,
突击:
};;
this.getAccountBalance=this.getAccountBalance.bind(this);;
this.componentdidmount=this.componentdidmount.bind(this);;
this.getmturkhits=this.getmturkhits.bind(this);;
}
getAccountBalance()。{
mturk.getAccountBalance(函数(err,数据){
this.setState(余额:data.availablebalance);;
}结合(这个);;
}

getmturkhits()。{
mturk.listHits(最大结果:100,(呃,数据)={
如果(错误){
控制台警告进行mturk api调用时出错:“,错误;;
}否则{
//呼叫成功
const hits=data.hits;;
this.setstate(mturkhits:hits);;
}
})
}

组件didmount()。{
this.getAccountBalance();;
this.getmturkhits();;
}
RelDead(){
返回(

如上所述,如果您按照关于React的教程(针对Web)因为概念是,在大多数情况下,相同的。

通过添加上面的行,我们给Mturk打了个电话李赛.我们已经将该调用的结果存储到了一个名为mturkhits的变量中,该变量位于我们的react原生状态。

下一步,我们将更改render()方法,以实际显示我们在可滚动列表中获取的点击结果。这将使我们的应用程序开始活跃起来。

在我们的应用程序中列出点击量

我们对下面的render()方法做了一些很大的更改,因此,如果你正在建立上一个react本机教程.

RelDead(){
返回(

leftcomponent=icon:'菜单',颜色:fff'
中心组件={{
文本:`my mturk hits`,,
样式:颜色:fff'
右分量={
平衡:

$this.state.balance_

}
>
数据=this.state.mturkhits_
renderItem=(项)=>

}
>

;;
}
}

const styles=样式表。创建({
容器:{
Flex:1,,
背景色:“fff”,,
Alignitems:'居中',,
justifycontent:'中心',,
},
平衡:{
颜色:“999”
}

(});;

请注意,在const styles=stylesheet.create(我们有整个组件的结束之前。当用上面的代码替换render()方法时,请注意不要使用重复的结束标记。

现在,在我们的呈现代码中,我们做了一些事情。我们添加了一个标题,将在左侧显示一个汉堡包,中间有一个文本标题,将在右边显示我们的余额(这与我们在以前的react本机教程

我们还添加了一个扁平列表组件,并从我们的反应原生状态将mturkhits数组交给它。我们告诉Flatlist为mturkhits数组中的每个项呈现一个listem组件(来自react原生元素第三方组件库)。当我们刷新应用程序时,我们应该看到如下内容:

通过将render()方法中的listem行从以下位置更改为以下内容,我们可以进行调整以显示每次命中的更多细节:

            

对此:


             
              key=item.hitid_
              
title=项目.标题
subtitle=`$item.hitid \n状态:$item.hitstatus,工作分配:$item.maxassignments `
SubtitleNumberOfLines=2_
>

当你的应用程序重新加载时,它应该是这样的:

包扎

今天,我们进一步帮助读者理解react native和mturk请求程序API的可能功能。在以后的教程中,我们将继续在此基础上利用这些强大的工具和框架做更高级的事情。与此同时,通过访问mturk api文档,您可以了解有关mturk api的更多信息。在这里.

我们希望您喜欢今天的教程。如果你有任何问题,请把问题发到我们的姆图克论坛.成为一个请求者,,在这里注册.想作为员工客户贡献自己的力量吗??从这里开始.