React Native中RNCViewPager重复注册错误的解决求助

问题场景 #

我要实现类似Instagram的个人主页界面：上方展示用户信息，下方是包含帖子/短视频等选项的TabView。我使用了SectionList组件组织结构，但运行时抛出错误：Invariant Violation: Tried to register two views with the same name RNCViewPager。

相关代码片段 #

SectionList实现

<SectionList
    sections={sections}
    renderItem={({ item }) => (
        <View style={styles.shortsList}>
            <ProfileShortItem short={item} />
        </View>
    )}
    renderSectionHeader={({ section: { title } }) => (
        <View>
            {title()}
        </View>
    )}
    removeClippedSubviews
    showsVerticalScrollIndicator={false}
    shouldRasterizeIOS
    stickySectionHeadersEnabled={false}
/>

sections配置

const sections = [
    {
        title: () => (
            <View style={{ ...styles.container, paddingTop: insets.top * 2 }}>
                <View style={styles.profileBox}>
                    <Image
                        style={styles.profileImage}
                        source={{ uri: user.photoURL }}
                    />
                    {user.fullName ?
                        <Title weight="regular" size="medium">{user.fullName}</Title>
                        :
                        <Title weight="regular" size="medium" color="secondary">
                            add your name
                            <Feather name="edit-3" size={16} color={colors.textInDarkGray} />
                        </Title>
                    }
                </View>

                <ProfileActionButtons user={user} />
            </View>
        ),
        data: () => (
            <ProfileTabs userShorts={userShorts} />
        )
    }
];

ProfileTabs组件

import React from "react";
import { View, useWindowDimensions } from "react-native";
import { SceneMap, TabBar, TabView } from "react-native-tab-view";

// other imports...

type Props = {
    userShorts: IShort[];
}

const ProfileTabs = (props: Props) => {
    const layout = useWindowDimensions();

    const ShortsRoute = () => {
        if (props.userShorts.length) {
            return (
                <View style={{ flex: 1, height: layout.height }}>
                    <ShortsList shorts={props.userShorts} />
                </View>
            )
        } else {
            return (
                <View style={{ marginTop: 40 }}>
                    <Title align="center">Nothing to see :(</Title>
                </View>
            )
        }
    };

    const OthersRoute = () => (
        <View style={{ flex: 1, backgroundColor: '#4008a9' }} />
    );

    const renderScene = SceneMap({
        shorts: ShortsRoute,
        others: OthersRoute,
    });

    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'shorts', title: 'Shorts' },
        { key: 'others', title: 'Others' },
    ]);

    const renderTabBar = (props: any) => (
        // tab bar options...
    )

    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
        />
    );
};

export default ProfileTabs;

错误原因 #

这个错误是因为项目重复引入了react-native-pager-view：你同时安装了react-native-tab-view和@react-navigation/material-top-tabs，这两个库都依赖react-native-pager-view，而你手动安装的react-native-pager-view@6.2.0和这两个库的依赖版本冲突，导致原生组件被重复注册。

解决方案 #

1. 清理冲突的依赖 #

首先卸载手动安装的react-native-pager-view，让依赖库自动拉取兼容版本：

# npm
npm uninstall react-native-pager-view
# yarn
yarn remove react-native-pager-view

然后重新安装依赖：

npm install
# 或
yarn install

2. 清理缓存并重建项目 #

• 清除Node模块和缓存：

rm -rf node_modules package-lock.json yarn.lock
npm cache clean --force

• 重新安装依赖：

npm install

• Expo项目清除缓存并重启：

expo r -c

• 原生项目额外清理：
  • iOS：

    cd ios && pod install --repo-update
    cd ..
    

  • Android：

    cd android && ./gradlew clean
    cd ..
    

3. 修正SectionList的误用（额外优化） #

你当前对SectionList的使用有误：SectionList的data字段需要是数组类型的数据，而非直接传入组件。建议直接用View按顺序组织头部和TabView，避免嵌套滚动问题：

<View style={{ flex: 1 }}>
    {/* 用户信息头部 */}
    <View style={{ ...styles.container, paddingTop: insets.top * 2 }}>
        <View style={styles.profileBox}>
            <Image
                style={styles.profileImage}
                source={{ uri: user.photoURL }}
            />
            {user.fullName ?
                <Title weight="regular" size="medium">{user.fullName}</Title>
                :
                <Title weight="regular" size="medium" color="secondary">
                    add your name
                    <Feather name="edit-3" size={16} color={colors.textInDarkGray} />
                </Title>
            }
        </View>
        <ProfileActionButtons user={user} />
    </View>
    {/* TabView内容区 */}
    <ProfileTabs userShorts={userShorts} />
</View>

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