current position:Home>Reactnative foundation - 12 (network request + flatlist to realize bottom loading, pull-down refresh, return to the top, multi column layout)

Reactnative foundation - 12 (network request + flatlist to realize bottom loading, pull-down refresh, return to the top, multi column layout)

2022-01-27 03:23:23 The black cat made a strange mistake

onEndReached: Bottom touch loading

onEndReachedThreshold={0.1} : Position of bottom loading , The default is the non display area The visible height is 50%(0.5)

onRefresh: The drop-down refresh ( When event is triggered , Need to put refreshing Set to true, After returning the data, modify it to false)

refreshing: Refresh the state of the animation , Use with pull-down refresh

onScroll: Monitor rolling , Pass in the parameter event, event.nativeEvent.contentOffset.y

         Be careful :RN How to handle events , After special treatment , Specially encapsulated synchronization events , If you want to see the printed value , You need to call persist( )

         Back to the top, you need to call FlatList Component approach , It is equivalent to calling the method of the child component in the parent component ,ref Binding method , call  scrollToIndex({index: 0}) Method ,0 Represents the top

export default class App extends Component {
  state = {showBtn: false};
  render() {
    return (
      <View>
        <FlatList
	     ...
          onScroll={this._onScroll}
          ref={el => (this.f1 = el)}>
        </FlatList>

        {this.state.showBtn ? (
          <TouchableOpacity onPress={() => this.f1.scrollToIndex({index: 0})}>
            <Text style={
   {fontSize: rpx(30), color: 'white'}}> Back to the top </Text>
          </TouchableOpacity>
        ) : null}
      </View>
    );
  }
  // Monitor rolling , Controls the display back to the top 
  _onScroll = e => {
    e.persist();
    this.setState({showBtn: e.nativeEvent.contentOffset.y > 1000});
  };
}

numColumns: Multi column layout

        columnWrapperStyle: The style of each line , It's written in the same way style

export default class App extends Component {
  render() {
    return (
      <FlatList
        ...
        numColumns={2}
        columnWrapperStyle={
   {
          justifyContent: 'space-evenly',
          marginTop: rpx(10),
        }}
       ></FlatList>
    );
  }
}

copyright notice
author[The black cat made a strange mistake],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270323188925.html

Random recommended