React Native Android - 尝试为 ViewPager 编写自定义 UI 组件时出错

Posted 2023-05-07

【中文标题】React Native Android - 尝试为 ViewPager 编写自定义 UI 组件时出错

【英文标题】：React Native Android - Error while trying to write custom UI component for ViewPager

【发布时间】：2015-12-16 16:38:47

【问题描述】：

我有一个自定义 viewpager，我正在尝试在 android 中编写自定义 UI 模块。我想学习如何做到这一点，因为我只能移植我的应用程序以做出反应，如果可以轻松地在 android 端为我的所有自定义模块编写这些 ManagerClass。

    protected MaterialViewPager createViewInstance(ThemedReactContext themedReactContext) 
    mViewPager = new MaterialViewPager(themedReactContext);


    mViewPager.setMaterialViewPagerListener(new MaterialViewPager.Listener() 
        @Override
        public HeaderDesign getHeaderDesign(int page) 
            switch (page) 
                case 0:
                    return HeaderDesign.fromColorResAndUrl(
                            R.color.green,
                            "https://fs01.androidpit.info/a/63/0e/android-l-wallpapers-630ea6-h900.jpg");
                case 1:
                    return HeaderDesign.fromColorResAndUrl(
                            R.color.blue,
                            "http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg");

            return null;
        
    );
    mViewPager.getViewPager().setOffscreenPageLimit(mViewPager.getViewPager().getAdapter().getCount());
    mViewPager.getPagerTitleStrip().setViewPager(mViewPager.getViewPager());

    return mViewPager;

我在 MainActivity.java 中有

    public List<ViewManager> createViewManagers(
        ReactApplicationContext reactContext) 
    return Arrays.<ViewManager>asList(
            new MaterialViewPagerManager()
    );
    

然后在反应方面，我为模块创建了 js

// MatViewPager.js

var  requireNativeComponent  = require('react-native');

var viewpager = 
  name: 'MatViewPager',
;

module.exports = requireNativeComponent('RCTMatViewPager', viewpager);

最后在 index.android.js 中

var 
 Text,
 View,
 MatViewPager,
 = React;

[...]

render: function() 
 return (
  <MatViewPager>
  </MatViewPager>
 );
 

我得到的错误是

Error: Invariant Violation: Element type is invalid: expected a string 
(for built-in components) or a class/function (for composite components) 
but got: undefined.

任何反应开发者都可以指出我正确的方向吗？

【参考方案1】：

首先确保你ManagerClassgetName方法返回"RCTMatViewPager"。

其次，您需要导入您的 js 模块。它不在 React 模块中，因为您创建了自己的 MatViewPager.js：

var MatViewPager = require('./path_to_your_modules/MatViewPager');