用户登录

ListView 是 React 的列表视图,它可以用来显示可以垂直滚动的内容的列表 .. 你需要给 ListView 组件提供两样东西,一个是要显示的数据的来源,就是 dataSource ,还是就是显示每行内容用的一个模板,也就是你要告诉 ListView 要怎么去显示列表里的每行内容 … 这个东西叫 renderRow …

先把 ListView 从 React 里面提取出来 … 输入一个 ListView .. 然后在想要使用 ListView 的组件里面 … 先添加一个 constructor 方法,给它一个 props 参数 … 在这个方法里面,再执行一下 super .. 加上这个 props ..

下面我们去给列表视图准备点要显示的数据 .. 这些数据一般是来自服务端,以后面我们会介绍具体的方法 … 这里先手工的去添加一点数据 .. 定义一个变量 … 名字是 movies … 它的值是一组数据 … 这些数据里面都有一个 title 属性 .. 对应的值就是电影的标题 .. 一会儿我们把这个标题放到列表视图里面去显示 ..

在使用这些数据之前,我们需要处理一下它们,因为 ListView 本身有一种很有效的方法去显示列表数据 … 而且我们还要确定在重新显示列表内容的时候,只重新显示修改过的数据 ..

这里需要一个对比数据的方法 .. 先添加一个变量 .. 名字可以是 dataSource .. 新建一个 ListView … 加上一个 DataSource … 在它里面,给它一个对象参数 .. 然后添加一个 rowHasChanged 方法 … 这个方法可以确定要显示的数据是不是有变化 …

定义一个箭头函数 … 加上两个参数 … row1 还有 row2 … 箭头右边是 row1 !== row2 … 看看显示前后这个数据是不是不相等,如果是,就表示这个数据有变化,就会去重新显示它 ..

下面再添加一个 this.state … 设置一下组件的初始化的状态 … 它的值是一个对象 .. 里面添加一个 movies ,我们可以把这个状态作为 ListView 的数据源 .. 它的值要再去处理一下 .. 使用 dataSource 的 cloneWithRows 这个方法 .. 再把数据交给它去处理一下 ..

输入 movies,这个 movies 就是我们之前手工添加的这个 movies 变量的值 …

然后在 render 方法里面,使用一个 ListView 这个组件 … 添加一个 ListView 的自关闭的标签 .. 上面添加一个 dataSource 属性 .. 它的值就是数据源 … 也就是处理好的要显示的数据 .. 这里可以使用 this.state.movies 来表示 …

再添加一个 renderRow … 它的值是一个函数 .. 在里面可以设置一下每行内容的样式 … 用一个箭头函数 … 接受一个参数,可以叫它 movie … 一个箭头 .. 然后用一个 Text 组件去显示电影里的标题内容 .. 上面添加一个样式 … 可以先用一个 itemText 这个样式 … 要显示的文字就是 movie.title … 也就是数据里的 title 属性的值 ..

保存 … 在屏幕上会显示出一个电影标题的列表 … 这些标题内容来自我们手工定义的一组数据里的这些 title 属性的值 …

列表视图 - ListView《 React Native #1 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点