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

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>
    );
  }
}