react-native 的ListView

虽然说ListView 快废弃了 但是花了一晚上事情去研究这个东西 还是想要记录一下。 权当 其他组件的指南吧。

import React,{Component} from 'react';
import {View, Text,StyleSheet, TouchableOpacity,Image,ListView,RefreshControl} from 'react-native';
import NavigationBar from "./NavigationBar"
import Toast,{DURATION} from 'react-native-easy-toast' // toast标签必须放在组件的最后  DURATION 作为补充属性存在
const data= {"list": [
    {
      "id": 1,
      "key": 1,
      "name": "James Martin",
      "age": 18,
    },
    {
      "id": 2,
      "key": 2,
      "name": "Cynthia Anderson",
      "age": 14,
    },
    {
      "id": 3,
      "key": 3,
      "name": "Scott Martinez",
      "age": 19,
    },
    {
      "id": 4,
      "key": 4,
      "name": "Jason Walker",
      "age": 19,
    },
    {
      "id": 5,
      "key": 5,
      "name": "Timothy Gonzalez",
      "age": 18,
    }
  ],}

export default class ListViewTest extends Component{
  constructor(props){
    super(props)
    const ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2}) // 四种数据获取方式 ，这边选择row的渲染方式如果连个row的数据不相等，那么渲染
    this.state={
      word:'',
      dataSource:ds.cloneWithRows(data.list), // ListView.DataSource 不能直接操作数据必须通过克隆的方式 操作副本；
      isLoading:true
    }
    this.onLoad();
  }
  renderRows(item){  //  toast 包裹点击元素的点击事件； DURATION.LENGTH_SHORT toast的显示时间；
    return (<View style={styles.row}>
      <TouchableOpacity onPress={()=>{
        this.toast.show(`单击了${item.name}`,DURATION.LENGTH_SHORT)
      }}>
      <Text>{item.name}</Text>
      <Text>{item.age}</Text>
      </TouchableOpacity>
    </View>)
  }
  renderSeparator(sectionId,rowId,adh){  // 渲染 分隔线
     return (<View style={styles.line} key={rowId}></View>)
  }
  renderFooter(){  // 渲染图片， 图片是网络图片必须 有宽高，而且是uri 引用
    return <Image style={{width:100,height:100}} source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545152832467&di=7e0e6976d0d3a2284f96d59f09692adf&imgtype=0&src=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FqW3iR9I30ndCM%2Fgiphy-tumblr.gif'}}/>
  }
  onLoad(){ // 模拟异步
    setTimeout(()=>{
      this.setState({isLoading:false})
    },2000)
  }
  render ( ){
    return (<View >
      <NavigationBar
          title='ListView'
          style={{backgroundColor:'blue'}}

      />
        <ListView
          dataSource={this.state.dataSource}//关联state中的datasource
          renderRow={(item) =>this.renderRows(item)}//制定listView的显示效果 返回 函数的执行结果
          showVerticalScrollIndicator={false}  // 显示垂直滚动条
          renderSeparator ={(sectionId,rowId,adh)=>this.renderSeparator(sectionId,rowId,adh)} // 渲染分割线
          renderFooter={()=>this.renderFooter()}  // 选择尾部
          refreshControl={<RefreshControl       // 下拉刷新的组件
              refreshing={this.state.isLoading}   // 是否 刷新中
              onRefresh={()=>this.onLoad}   // 操作刷新时 的钩子函数
          />}

        />
      <Toast
          ref={toast=>{this.toast=toast}} 
      />
    </View>)
  }
}

const styles =  StyleSheet.create({
  container:{
    backgroundColor:'gray',
    justifyContent:'center',
  },
  text:{
    fontSize:20,
  },
  row:{
    height:50
  },
  line:{
    height:1,
    backgroundColor:"black"
  }
})