{"id":22916429,"url":"https://github.com/janiokq/react-native-nlist","last_synced_at":"2025-05-12T17:04:09.296Z","repository":{"id":57338706,"uuid":"158513143","full_name":"janiokq/react-native-nlist","owner":"janiokq","description":"原生Listview   Native lListView     react-native   encapsulation  Memory recovery  reusing  High performance","archived":false,"fork":false,"pushed_at":"2018-11-22T05:41:29.000Z","size":9349,"stargazers_count":61,"open_issues_count":2,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-12T17:03:17.285Z","etag":null,"topics":["java","listview","objective-c","react-native","recyclerview","uitabview"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/janiokq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-21T08:10:44.000Z","updated_at":"2023-01-03T21:44:41.000Z","dependencies_parsed_at":"2022-09-07T11:51:04.300Z","dependency_job_id":null,"html_url":"https://github.com/janiokq/react-native-nlist","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janiokq%2Freact-native-nlist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janiokq%2Freact-native-nlist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janiokq%2Freact-native-nlist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janiokq%2Freact-native-nlist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/janiokq","download_url":"https://codeload.github.com/janiokq/react-native-nlist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253784908,"owners_count":21963899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["java","listview","objective-c","react-native","recyclerview","uitabview"],"created_at":"2024-12-14T06:12:49.007Z","updated_at":"2025-05-12T17:04:09.258Z","avatar_url":"https://github.com/janiokq.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# react-native-nlist\n\nreact-nativ listView   Performance solution   Native implementation   Smooth memory recovery    Pull up refresh drop-down loading   Support native custom refreshing animation    Support itemView dynamic height\n\nPerformance is better than all current list components.   \n\n\n\n### [中文](http://incode.live/articles/2018/11/21/1542788141721.html) \n\n\n###  [Android demo apk download](./app-release.apk) \n\n\n\n### IOS  Use TabView   implementation \n\nBe based on  [react-native-tableview](https://github.com/aksonov/react-native-tableview) \n### Android  Use Recyclerview   implementation \nRecycling using duplicate templates\n\n\n\n### Performance  testing\n\n####ios  use iphone 6s     10015 data, lots of pictures.    No use of  [SDWebImage](https://github.com/SDWebImage/SDWebImage) to optimize images.\nFast slide to 4679th data   Memory usage 111 MB\n![avatar](./1.png)\n\n\t\t\n#### Android  use MI 6   10015 data, lots of pictures.    No use of  [Glide](https://github.com/bumptech/glide) to optimize images.\nFast slide to 2569th data      Android's list scroll speed has a maximum threshold. I plan for 2 minutes.     Hand pain   ~~(╯﹏╰)     Memory usage 123 MB   \n![avatar](./3.png)\t\n\t\n\n\n## installation\n`$ npm install react-native-nlist --save`\n\n## configuration\n\n#### iOS\n\n1. In XCode, in the project navigator, right click `your project name ` ➜ `Add Files to `\n2. Go to `node_modules` ➜ `react-native-nlist` and add `/node_modules/react-native-nlist/ios/RNNlistcode`\n3. Add  MJRefresh  use cocoapods     Create podfile under your IOS project  `/ios/Podfile`\n\n```\n # Uncomment the next line to define a global platform for your project\nplatform :ios, '8.0'\ntarget 'demo' do\n  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks\n  # use_frameworks!\n  # Pods for Driver\n  use_frameworks!\n  pod 'MJRefresh'\nend\n\npost_install do |installer|\n  installer.pods_project.targets.each do |target|\n    target.build_configurations.each do |config|\n      config.build_settings['SWIFT_VERSION'] = '4.0'\n    end\n  end\nend\n```\n` pod 'MJRefresh'`\n Execute a command  `pod install`\n4. Run your project   `.xcworkspace`    (`Cmd+R`)\u003c\n\n#### Android\n\n1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n  - Add `import com.janiokq.Nlist.RNNlistPackage;` to the imports at the top of the file\n  - Add `new RNNlistPackage()` to the list returned by the `getPackages()` method\n2. Append the following lines to `android/settings.gradle`:\n  \t```\n  \tinclude ':react-native-nlist'\n  \tproject(':react-native-nlist').projectDir = new File(rootProject.projectDir, \t'../node_modules/react-native-nlist/android')\n  \t```\n3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n  \t```\n      compile project(':react-native-nlist')\n  \t```\n  \t\n## Attribute description\n\n\n### onScroll   \n ios is  Height of content\n android is   The last rolling start difference       The negative number is upward.      The positive number is downward. \n\n\n### onScrollto  \n  only  android     o and 1     value \n   1  Scroll to the head\n   0  Scroll to the bottom\n\n\n### reactModuleForCell  \t\n\tios  Template name     AppRegistry.registerComponent   generate\n\t  \n\tAppRegistry.registerComponent('Itemlist', () =\u003e Itemlist);\n\n\n### renderItem  \t\n\tandroid  Template name     A class name or function name.   \n\n\n### springback \n  android  specific   scroll rebound effect similar to IOS\n\n  \n### canRefresh\n  Whether to use drop-down refresh\n\n\n### canLoadmore\n Whether to use pull-up refresh\n\n \n### refreshState \n  Refresh state control\n\n\n### loadinState\n  Load state control\n\n\n### onRefresh\n  Refresh event  \n\n\n### onLoadmore\n  Load event\n\n\n### dataSource\n  data source  Array\u003cObject\u003e      Object  You must have the height attribute.\n\t\n## Usage\n\nlist Use\n\n```javascript\nimport RNNlist from 'react-native-nlist';\n\n// TODO: What to do with the module?\nRNNlist;\n\n \u003cRNNlist\n        onScroll={(e)=\u003e{\n          //ios is  Height of content\n          //android is   The last rolling start difference       The negative number is upward.      The positive number is downward. \n          //direction\n          // console.log(e.nativeEvent.contentOffset)\n\n\n        }}\n        // only  android\n        onScrollto={(e)=\u003e{\n            // o and 1    \n            // 1  Scroll to the head\n            // 0  Scroll to the bottom\n            //e\n        }}\n        inserttheway={0}\n        //ios   Rendering template\n        reactModuleForCell=\"Itemlist\"\n        //android  Rendering template\n        renderItem={Itemlist}\n        //Rendering initialization of Android\n        Initializeprops={{}}\n\n        //Android rolling rebound effect\n        springback={true}\n        //Android template quantity\n        rowHeight={40}\n        style={{\n          width:width,\n          height:height\n        }}\n\n        canRefresh={true}\n        canLoadmore={true}\n\n        refreshState={this.state.refreshState}\n        loadinState={this.state.loadinState}\n        dataSource={this.state.dataSource}\n\n        onRefresh={()=\u003e{\n          setTimeout(()=\u003e{\n            this.getdata();\n          },1000)\n        }}\n        onLoadmore={()=\u003e{\n          setTimeout(()=\u003e{\n            this.adddata();\n          },1000)\n        }}\n    /\u003e\n    \n\n```\n\nTemplate registration\n\n\n```\n\nclass Itemlist extends  Component{\n  constructor(props){\n    super(props)\n  }\n  render() {\n    let data  =  this.props;\n    if(Platform.OS=='ios'){\n        data =this.props.data;\n    }\n\n    return (\n      \u003cView style={{flex:1,}} \u003e\n            \u003cView style={{\n                width:width,\n                height:data.height,\n              }} \u003e\n\n              \u003cText\u003e{data.index}\u003c/Text\u003e\n\n              \u003cImage \n              // source={{\n              //   uri:'http://img3.imgtn.bdimg.com/it/u=3360690558,3623061169\u0026fm=11\u0026gp=0.jpg'\n              // }}\n              source={{uri: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3360690558,3623061169\u0026fm=111\u0026gp=0.jpg'}}\n              style={{\n                width:width,\n                height:data.height-30,\n              }}\n              resizeMode='stretch'\n              /\u003e\n\n              \u003c/View\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n\nAppRegistry.registerComponent('Itemlist', () =\u003e Itemlist);\n\n\n```\n  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaniokq%2Freact-native-nlist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaniokq%2Freact-native-nlist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaniokq%2Freact-native-nlist/lists"}