react-nativ listView Performance solution Native implementation Smooth memory recovery Pull up refresh drop-down loading Support native custom refreshing animation Support itemView dynamic height

Performance is better than all current list components.

Be based on react-native-tableview

Recycling using duplicate templates

####ios use iphone 6s 10015 data, lots of pictures. No use of SDWebImage to optimize images. Fast slide to 4679th data Memory usage 111 MB

Fast slide to 2569th data Android's list scroll speed has a maximum threshold. I plan for 2 minutes. Hand pain ~~(╯﹏╰) Memory usage 123 MB

$ npm install react-native-nlist --save

1. In XCode, in the project navigator, right click your project name ➜ Add Files to
2. Go to node_modules ➜ react-native-nlist and add /node_modules/react-native-nlist/ios/RNNlistcode
3. Add MJRefresh use cocoapods Create podfile under your IOS project /ios/Podfile

 # Uncomment the next line to define a global platform for your project
platform :ios, '8.0'
target 'demo' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
  # Pods for Driver
  use_frameworks!
  pod 'MJRefresh'
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '4.0'
    end
  end
end

pod 'MJRefresh' Execute a command pod install 4. Run your project .xcworkspace (Cmd+R)<

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.janiokq.Nlist.RNNlistPackage; to the imports at the top of the file
• Add new RNNlistPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-nlist'
   project(':react-native-nlist').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-nlist/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-nlist')
   

ios is Height of content android is The last rolling start difference The negative number is upward. The positive number is downward.

only android o and 1 value 1 Scroll to the head 0 Scroll to the bottom

ios  Template name     AppRegistry.registerComponent   generate
  
AppRegistry.registerComponent('Itemlist', () => Itemlist);

android  Template name     A class name or function name.   

android specific scroll rebound effect similar to IOS

Whether to use drop-down refresh

Whether to use pull-up refresh

Refresh state control

Load state control

Refresh event

Load event

data source Array Object You must have the height attribute.

list Use

import RNNlist from 'react-native-nlist';

// TODO: What to do with the module?
RNNlist;

 <RNNlist
        onScroll={(e)=>{
          //ios is  Height of content
          //android is   The last rolling start difference       The negative number is upward.      The positive number is downward. 
          //direction
          // console.log(e.nativeEvent.contentOffset)


        }}
        // only  android
        onScrollto={(e)=>{
            // o and 1    
            // 1  Scroll to the head
            // 0  Scroll to the bottom
            //e
        }}
        inserttheway={0}
        //ios   Rendering template
        reactModuleForCell="Itemlist"
        //android  Rendering template
        renderItem={Itemlist}
        //Rendering initialization of Android
        Initializeprops={{}}

        //Android rolling rebound effect
        springback={true}
        //Android template quantity
        rowHeight={40}
        style={{
          width:width,
          height:height
        }}

        canRefresh={true}
        canLoadmore={true}

        refreshState={this.state.refreshState}
        loadinState={this.state.loadinState}
        dataSource={this.state.dataSource}

        onRefresh={()=>{
          setTimeout(()=>{
            this.getdata();
          },1000)
        }}
        onLoadmore={()=>{
          setTimeout(()=>{
            this.adddata();
          },1000)
        }}
    />
    

Template registration

class Itemlist extends  Component{
  constructor(props){
    super(props)
  }
  render() {
    let data  =  this.props;
    if(Platform.OS=='ios'){
        data =this.props.data;
    }

    return (
      <View style={{flex:1,}} >
            <View style={{
                width:width,
                height:data.height,
              }} >

              <Text>{data.index}</Text>

              <Image 
              // source={{
              //   uri:'http://img3.imgtn.bdimg.com/it/u=3360690558,3623061169&fm=11&gp=0.jpg'
              // }}
              source={{uri: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3360690558,3623061169&fm=111&gp=0.jpg'}}
              style={{
                width:width,
                height:data.height-30,
              }}
              resizeMode='stretch'
              />

              </View>
      </View>
    )
  }
}

AppRegistry.registerComponent('Itemlist', () => Itemlist);