React-native ScrollView 上拉加载和下拉刷新

Posted 2023-03-09

参考技术A 我们日常开发的时候，经常会遇到上拉加载更多的需求，原因很简单，数据量大的时候分批次加载可提高加载效率，为用户省点流量和时间。
这次我就给大家分享一下我写得 ScrollView （大佬勿喷），本人是在前端道路上越走越远得小菜鸡
言归正传

首先第一步，引入我们得ScrollView

引入完之后我们开始下面得操作

</ScrollView>

下面我们讲一下触底事件得方法

关于 FlatList 上拉刷新和下拉加载详解地址
https://www.jianshu.com/p/fb3bd2bf898c

ScrollView 在 react-native 中渲染没有数据的更新组件？

【中文标题】ScrollView 在 react-native 中渲染没有数据的更新组件？

【英文标题】：ScrollView rendering updated components without data in react-native?

【发布时间】：2017-07-11 12:40:57

【问题描述】：

我的页面位于 react-native 应用的 ScrollView 中。在第一次加载子组件时，可以说多个 TextInput's 渲染得非常好。

每个 TextInput 都有一个唯一的键。 当我开始更新任何 TextInput 字段时，其他组件就会崩溃。折叠是指组件存在但不会显示任何数据。 onPress 事件适用于折叠的组件，但文本不显示。

我发现的一种方法是在每次渲染时添加一个唯一的随机 key，但随后 TextInput 的焦点会丢失，这不是良好的用户体验。

代码：

class App extends React.Component 
  constructor(props) 
   super(props);
   this.state= this.props;
  

  buildList(data) 
    _.map(data, blog => 
      return(
      <View key=blog.id>
        <Text>blog.title</Text>
        <TextInput
         placeholder=blog.label
         onChangeText=text => onChangeText(text)
         value=value
        />
      </View>
     );
    
  

  render() 
    const 
          data
         = this.state;
    return (
      <View style=mainStyles.pageWrap>
        <ScrollView style=mainStyles.contentWrap>
          <View>
            
              this.buildList(
                data
              )
            
          </View>
        </ScrollView>
      </View>
    );
  

【问题讨论】：

onChangeText 是如何定义的？

@AlexanderGuschin，很抱歉没有发布答案，我发现我必须将style= flex:1 添加到所有子组件中。

【参考方案1】：

查看documentation 并将 style= flex:1 添加到每个子组件并修复它。

为了绑定一个ScrollView的高度，要么设置一个ScrollView的高度 直接视图（不鼓励）或确保所有父视图都有 有界高度。忘记将 flex: 1 向下传输到视图堆栈 在这里可能会导致错误，元素检查器很容易发现 调试。