React Native Model 嵌套 FlatList 滚动问题及解决方案

一、版本说明

React Native v0.60+

二、问题：React Native 中使用 Model 时，内部 FlatList 无法滚动

在 React Native 中，Model 组件可以用来创建一个具有可滚动内容的视图。然而，当在 Model 中使用 FlatList 时，有时会出现滚动问题，导致内部的 FlatList 无法滚动。

2.1、返回元素内容，大致如下：

return (
  <View>
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  </View>
);

三、原因分析：主要是 FlatList 下的 renderItem

在上述代码中，FlatList 组件的 renderItem 函数返回了一个 Text 组件。Text 组件是一个文本视图，它不会占据任何空间，因此 FlatList 无法对其进行滚动。

四、解决办法

要解决这个问题，需要在 renderItem 函数中返回一个可以占据空间的组件。例如，可以返回一个 View 组件，如下所示：

return (
  <View>
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={{ height: 100 }}>
          <Text>{item.name}</Text>
        </View>
      )}
    />
  </View>
);

这样，FlatList 就可以对 View 组件进行滚动。

五、另一种解决办法

另一种解决办法是在 Model 中使用 Viewport 组件。Viewport 组件可以创建一个具有可滚动内容的视图，并且它可以解决 FlatList 无法滚动的问题。

要使用 Viewport 组件，需要在 Model 中导入 Viewport 组件，如下所示：

import { Viewport } from 'react-native';

然后，可以在 Model 中使用 Viewport 组件，如下所示：

return (
  <Viewport>
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item.name}</Text>}
    />
  </Viewport>
);

这样，就可以解决 FlatList 无法滚动的问题。