React Native基础：实现无限滚动

毫无疑问，React Native是一个强大而强大的解决方案。 它为不熟悉原生技术的广大软件工程师打开了跨平台应用程序开发的世界。 但是，当您刚开始学习时，同时实现复杂的东西可能会非常困难。 在这个简短的教程中，我想提供有关如何实现其中之一（无限滚动）的逐步指南。

准备

好的，让我们开始吧。 出于本简短教程的目的，我将使用Expo库-在构建简单的React Native应用程序时非常方便。 因此，请确保您的计算机上安装了以下软件：

• Node.js —我将使用最新的稳定版本。 要管理Node版本，我更喜欢nvm
• Expo.io-按照其官方安装指南进行安装

首先，打开控制台并使用expo可执行文件创建一个基本的最小应用程序： expo init infinite_scroll 。 它提供了一个选择模板，可从中创建应用程序-仅需使用空白选项即可完成我们今天的目标。

现在，我们需要等待一会儿，而expo正在准备我们的应用程序并安装所有基础库。 完成后，我们将具有功能齐全的React Native应用程序，可以通过调用expo start 。

Expo提供了一个非常方便的选项-在iOS模拟器中运行您的应用程序。 这是我们首次启动应用程序时的样子：

有前途的开始

现在我们都准备好进行开发了-让我们编写一些代码。 在您喜欢的代码编辑器中打开app目录，然后在根目录中找到一个名为App.js的文件。 App.js是应用程序的入口点，一开始就是这样：

import React from 'react' ;
import { StyleSheet, Text, View } from 'react-native' ;

export default function App ()  {
  return (
    < View style = {styles.container} >
       Open up App.js to start working on your app! 
    View >
  );
}

const styles = StyleSheet.create({
  container : {
    flex : 1 ,
    backgroundColor : '#fff' ,
    alignItems : 'center' ,
    justifyContent : 'center' ,
  },
});

我们的目标是实现无限滚动。 最简单的方法之一是显示一长串简单元素，并使它们正确滚动。 在进一步的开发中，您可以将您的应用程序连接到数据源，例如外部API或本地数据存储，但是我们将在应用程序代码中附带一系列简单的元素：

const data = [
  { id : 1 , text : 'One' }
]

我们应该定义的第二件事是如何显示每个元素。 由于我们正在使用React Native，因此我们在服务中拥有React的全部功能，因此我们需要定义一个新视图，该视图将代表一个元素。 为此，我们将定义一个新的const Item并使用功能性方法返回内部带有组件的组件：

const Item = ( {item} ) => {
  return (
    < View >
       {item.text} 
    View >
  );
}

这些都是标准的React Native组件，因此您不需要将任何第三方库连接到您的项目。

更好地对元素进行样式设置以使其看起来更好也是一个好主意，例如，作为带有阴影的白色矩形，使其看起来像悬浮在背景顶部。

这是应用样式的最终代码：

...
const data = [
  {id : 1 , text : 'One' }
]

const Item = ( {item} ) => {
  return (
    < View style = {[styles.item, styles.shadow ]}>
       {item.text} 
    View >
  );
}
...
const styles = StyleSheet.create({
  item : {
    backgroundColor : '#fff' ,
    padding : 20 ,
    marginHorizontal : 10 ,
    marginBottom : 3.5 ,
    flexDirection : 'row'
  },
  shadow : {
    shadowColor : '#000' ,
    shadowOffset : {
      width : 0 ,
      height : 10
    },
    shadowOpacity : 0.47 ,
    shadowRadius : 9 ,
  }
});

在那之后，我们几乎都准备好看到第一个列表元素轻轻地漂浮在我们的iOS模拟器的背景上。 最后，实际上是使列表无限滚动的核心要素- 组件。 您可以在官方文档中找到有关它的更多信息。
简而言之，它需要三个基本的输入参数来完成其工作：

• data ，数据源应在此处传递。 在我们的例子中，它是一个常量，其名称与前面步骤中定义的名称相同。
• renderItem ，我们将先前定义的Item常量传递给它，并确保呈现每个data ;
• 负责在数据集中查找唯一键的keyExtractor正确呈现元素需要它们。

...
const List =() => {
  return (
    < FlatList
      contentContainerStyle = {styles.list}
      data = {data}
      renderItem = {Item}
      keyExtractor = {item => item.id}
    />
  );
}

export default function App() {
  return (
      
  );
}

const styles = StyleSheet.create({
  list: {
    paddingVertical: 30,
    justifyContent: 'flex-start'
  }
});

将这些更改应用于App.js之后，我们可以在Simulator中首先看到令人满意的结果：

强大的十八

现在，我们已经为多个列表元素准备好了所有内容，让我们添加它们-强大的18个项目将占据所有Simulator屏幕，甚至更多。 这正是我们测试无限滚动实现所需要的。

const data = [
  { id : '1' , text : 'One' },
  { id : '2' , text : 'Two' },
  { id : '3' , text : 'Three' },
  { id : '4' , text : 'Four' },
  { id : '5' , text : 'Five' },
  { id : '6' , text : 'Six' },
  { id : '7' , text : 'Seven' },
  { id : '8' , text : 'Eight' },
  { id : '9' , text : 'Nine' },
  { id : '10' , text : 'Ten' },
  { id : '11' , text : 'Eleven' },
  { id : '12' , text : 'Twelve' },
  { id : '13' , text : 'Thirteen' },
  { id : '14' , text : 'Fourteen' },
  { id : '15' , text : 'Fifteen' },
  { id : '16' , text : 'Sixteen' },
  { id : '17' , text : 'Seventeen' },
  { id : '18' , text : 'Eighteen' },
]

将其全部包裹起来的最后一件事是 React Native组件，该组件确保其包含的内容不会与周围的任何其他组件发生冲突。 请在官方文档中查看更多信息 。

这是App.js的最终状态：

import React from 'react' ;
import { StyleSheet, Text, View, FlatList, SafeAreaView } from 'react-native' ;

const data = [
  { id : '1' , text : 'One' },
  { id : '2' , text : 'Two' },
  { id : '3' , text : 'Three' },
  { id : '4' , text : 'Four' },
  { id : '5' , text : 'Five' },
  { id : '6' , text : 'Six' },
  { id : '7' , text : 'Seven' },
  { id : '8' , text : 'Eight' },
  { id : '9' , text : 'Nine' },
  { id : '10' , text : 'Ten' },
  { id : '11' , text : 'Eleven' },
  { id : '12' , text : 'Twelve' },
  { id : '13' , text : 'Thirteen' },
  { id : '14' , text : 'Fourteen' },
  { id : '15' , text : 'Fifteen' },
  { id : '16' , text : 'Sixteen' },
  { id : '17' , text : 'Seventeen' },
  { id : '18' , text : 'Eighteen' },
]

const Item = ( {item} ) => {
  return (
    < View style = {[styles.item, styles.shadow ]}>
       {item.text} 
    View >
  );
}

const List = () => {
  return (
    < FlatList
      contentContainerStyle = {styles.list}
      data = {data}
      renderItem = {Item}
      keyExtractor = {item => item.id}
    />
  );
}

export default function App() {
  return (
     
      
     
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
  list: {
    paddingVertical: 30,
    justifyContent: 'flex-start'
  },
  item: {
    backgroundColor: '#fff',
    padding: 20,
    marginHorizontal: 10,
    marginBottom: 3.5,
    flexDirection: 'row'
  },
  shadow: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 10
    },
    shadowOpacity: 0.47,
    shadowRadius: 9,
  }
});

这就是应用程序中向下滚动的feed的样子：

在下一个教程中，我们将在项目列表顶部添加一个按钮，并使该按钮向列表中添加更多项目。

先前发布在 https://medium.com/@mulev/digesting-react-native-one-piece-at-a-time-infinite-scroll-1b18a15c556

翻译自: https://hackernoon.com/react-native-basics-implementing-infinite-scroll-hs143ur5