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. ();
  }
  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\'}}/>
  }
   (){ // 模拟异步
    setTimeout(()=>{
      this.setState({isLoading:false})
    },2000)
  }
  render ( ){
    return (<View >
      <NavigationBar
           =\'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. }   // 操作刷新时 的钩子函数
          />}

        />
      <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\"
  }
})