react native 列表渲染

react native 列表渲染

react中用来渲染列表的组件有ListView和FlatList,这两种组件都是用来动态渲染列表的,但有时候我们会遇到渲染固定的列表项的情况,这些列表不会动态变化,这时候用react native提供的列表渲染组件可能有点不合适。

例如类似下面这种情况:

Screenshot_20180302-223024.jpg

这时候我们可以采用JSX语法来构建一个元素集合,JSX允许在大括号中嵌入任何表达式,所以我们可以在map()中这样使用,把一段纯视图代码遍历然后返回。

这时候别忘了给每个item加上key属性,否则系统会发出警告。keys可以在列表中的某些元素被增加或删除的时候帮助react native识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

listItem(props) {
      const listItems = arr.map((item) =>
        <Item name={item.name} key={item.id} />
      );
      return (
        <View>{listItems}</View>
      );
 }
render(){
    return (
      <View>
           <ScrollView>
                {this.listItem()}
           </ScrollView>
      </View>
    )
}

thanks !

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容