React Native ScrollView能否传入元素数组？滚动异常问题咨询

嘿，我来帮你排查这个问题！首先要明确：ScrollView完全支持传入元素数组作为子组件，官方文档里的例子只是展示单个元素的场景，数组形式是完全合法的，你的问题其实出在样式设置上。

问题根源 #

你给item设置了height: '20%'，这个百分比是相对于父容器（ScrollView）的高度来计算的。而你的ScrollView设置了height: '100%'（占满屏幕高度），理论上30个item总高度应该是6倍屏幕高度，但在React Native中，当子元素用百分比高度依赖ScrollView时，会出现计算异常：因为ScrollView的内容高度是由子元素决定的，反过来子元素又依赖ScrollView的高度，形成了循环依赖，导致ScrollView无法正确识别内容总高度，自然无法触发滚动。

另外，你的代码里还有一个小问题：创建列表元素时没有给每个元素添加key属性，这会触发React的性能警告，建议补上。

解决方案 #

我们可以通过两种方式修正这个问题：

方式1：使用固定高度 #

把item的高度从百分比改成固定值，让内容总高度明显超过屏幕，ScrollView就能正常滚动：

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

const styles = StyleSheet.create({
  scrollView: {
    flex: 1, // 用flex:1替代height:'100%'，适配更稳定
    width: '100%',
    // 去掉flexDirection: 'column'，ScrollView默认就是纵向滚动
  },
  item: {
    height: 120, // 固定高度
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
});

const data = [];
for (let i = 0; i < 30; i++) {
  const datum = (
    <View key={i} style={styles.item}> {/* 添加key属性避免警告 */}
      <Text style={{ fontSize: 30 }}>{i.toString()}</Text>
    </View>
  );
  data.push(datum);
}

const App = () => (
  <ScrollView style={styles.scrollView}>
    {data}
  </ScrollView>
);

export default App;

方式2：基于屏幕高度计算动态高度 #

如果还是想保持item高度为屏幕的20%，可以用Dimensions获取屏幕高度，直接计算出具体数值，避免百分比的循环依赖问题：

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

const screenHeight = Dimensions.get('window').height;

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    width: '100%',
  },
  item: {
    height: screenHeight * 0.2, // 屏幕高度的20%
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
  },
});

const data = [];
for (let i = 0; i < 30; i++) {
  const datum = (
    <View key={i} style={styles.item}>
      <Text style={{ fontSize: 30 }}>{i.toString()}</Text>
    </View>
  );
  data.push(datum);
}

const App = () => (
  <ScrollView style={styles.scrollView}>
    {data}
  </ScrollView>
);

export default App;

总结 #

你的核心误解是以为ScrollView不支持数组子组件，但实际上这完全没问题。问题的关键在于子元素的百分比高度在ScrollView中无法正确计算，导致内容高度没有超出可视范围，无法触发滚动。通过改用固定高度或基于屏幕高度的动态高度，再补上key属性，就能解决这个问题啦！

内容的提问来源于stack exchange，提问作者Roy Tommy