嘿，我来帮你一步步解决这两个问题～

一、先处理TypeError: Cannot read property 'array' of undefined错误 #

这个报错大概率和你使用的Carousel包（应该是react-native-snap-carousel）版本兼容、导入方式或依赖配置有关，给你几个排查方向：

• 版本兼容性问题：react-native-snap-carousel已经很久没维护了，如果你用的是较新的Expo SDK（比如SDK 48及以上），它和新版的React Native、Hermes引擎兼容性很差，这时候建议直接切换到你后来尝试的react-native-reanimated-carousel——这个包是活跃维护的，适配新版Expo和Hermes。
• 导入方式错误：如果坚持用旧版snap carousel，要注意它的导出方式：早期版本是默认导出，如果你写成import { Carousel } from 'react-native-snap-carousel'（解构导入），就会得到undefined，进而访问array属性时报错，应该改成import Carousel from 'react-native-snap-carousel'。
• 依赖未正确配置：不管用哪个Carousel包，都依赖react-native-reanimated和react-native-gesture-handler，先确保你在Expo里正确安装了它们：

  expo install react-native-reanimated react-native-gesture-handler
  

  然后检查你的babel.config.js，一定要把reanimated的插件加到数组最后（顺序很重要）：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: ['react-native-reanimated/plugin'],
    };
  };
  

  改完配置后记得重启Metro服务器，最好加--clear清理缓存：npx expo start --clear。

二、解决Reanimated Carousel的分页功能 #

react-native-reanimated-carousel本身没有内置分页指示器，但我们可以自己实现一个简单的，步骤很清晰：

1. 维护当前轮播索引状态：在组件里用useState记录当前显示的项的索引：

   const [currentIndex, setCurrentIndex] = useState(0);
   

2. 给Carousel绑定索引更新回调：利用Carousel的onSnapToItem属性，每次滑动到新项时更新索引：

   <Carousel
     data={yourCarouselData} // 你的轮播数据源
     renderItem={({ item }) => (
       {/* 这里写你的轮播项内容，比如图片、文字 */}
       <View style={{ width: '100%', height: 250, justifyContent: 'center', alignItems: 'center' }}>
         <Text>{item.title}</Text>
       </View>
     )}
     width={Dimensions.get('window').width} // 轮播宽度设为屏幕宽度
     height={250} // 轮播高度
     onSnapToItem={(index) => setCurrentIndex(index)} // 关键：更新当前索引
     loop={false} // 如果不需要循环轮播可以设为false
   />
   

3. 自定义分页指示器：用一组小圆点来展示当前位置，根据currentIndex切换激活样式：

   <View style={{ flexDirection: 'row', marginTop: 12, gap: 8 }}>
     {yourCarouselData.map((_, index) => (
       <View
         key={index}
         style={[
           {
             width: 8,
             height: 8,
             borderRadius: 4,
             backgroundColor: '#cccccc',
           },
           index === currentIndex && { backgroundColor: '#007AFF' }, // 激活时的蓝色
         ]}
       />
     ))}
   </View>
   

把这些代码整合起来，就能实现完整的带分页的轮播了。如果还是有问题，记得再检查一遍reanimated的配置，或者重启Metro服务器清理缓存～

备注：内容来源于stack exchange，提问作者Sheriff oladimeji