React Native Android-嘗試爲ViewPager編寫自定義UI組件時出錯

我有一個自定義viewpager，我試圖在android中編寫自定義UI模塊。我想學習如何做到這一點，因爲我只能移植我的應用程序來做出反應，如果可能的話，可以輕鬆地在Android端爲我所有的自定義模塊編寫這些ManagerClass。React Native Android-嘗試爲ViewPager編寫自定義UI組件時出錯

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.

任何反應的開發人員可以指出我在這個正確的方向嗎？

來源

2015-09-19 Wingston Sharon

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

其次你需要導入你的js模塊。它不在React模塊中，因爲您創建了自己的MatViewPager.js：

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

來源

2015-09-21 23:23:19

React Native Android-嘗試爲ViewPager編寫自定義UI組件時出錯

回答

相關問題