反应本机ViewPagerAndroid错误

Question

Has anyone been successful in using the ViewPagerAndroid component?

EDIT

react-native 0.13.0-rc

The error I'm getting is: No ViewManager defined for class AndroidViewPager

Original post below

react-native 1.2.0

I keep getting this error:

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

I tried their code exatly as in the UIExplorer examples, ViewPagerAndroidExample.android.js

  render: function() {
    var pages = [];
    for (var i = 0; i < PAGES; i++) {
      var pageStyle = {
        backgroundColor: BGCOLOR[i % BGCOLOR.length],
        alignItems: 'center',
        padding: 20,
      };
      pages.push(
        <View key={i} style={pageStyle} collapsable={false}>
          <Image
            style={styles.image}
            source={{uri: IMAGE_URIS[i % BGCOLOR.length]}}
          />
          <LikeCount />
       </View>
      );
    }
    var page = this.state.page;
    return (
      <View style={styles.container}>
        <ViewPagerAndroid
          style={styles.viewPager}
          initialPage={0}
          onPageScroll={this.onPageScroll}
          onPageSelected={this.onPageSelected}
          ref={viewPager => { this.viewPager = viewPager; }}>
          {pages}
        </ViewPagerAndroid>
        <View style={styles.buttons}>
          <Button text="Start" enabled={page > 0} onPress={() => this.go(0)}/>
          <Button text="Prev" enabled={page > 0} onPress={() => this.move(-1)}/>
          <Text style={styles.buttonText}>Page {page + 1} / {PAGES}</Text>
          <ProgressBar size={100} progress={this.state.progress}/>
          <Button text="Next" enabled={page < PAGES - 1} onPress={() => this.move(1)}/>
          <Button text="Last" enabled={page < PAGES - 1} onPress={() => this.go(PAGES - 1)}/>
        </View>
      </View>
    );
  },

Answer 1

I had the exact same issue, and coudn´t fix it. But maybe you want to use the react-native-viewpager, which works perfectly for iOS and Android. You can get it here :

It´s really easy to work with... The following works in my Android and iOS App:

1. Define your Pages/Views

    var VIEWS = ['View 1','View 2','View 3'];

2. Then set the dataSource in your getInitialState function:

    getInitialState: function () {
        var dataSource = new ViewPager.DataSource ({
            pageHasChanged: ( p1, p2 ) => p1 !== p2,
        });

        return {
            dataSource: dataSource.cloneWithPages(VIEWS),
        };
    },

3. In your render-method:

     <ViewPager
         style={this.props.style}
         dataSource={this.state.dataSource}
         renderPage={this._renderPage}
         onChangePage={this._onChangePage}
         isLoop={true}
         autoPlay={false}/>

4. And then render your Pages:

     _renderPage: function ( data:Object, pageID:number ) {
        return (
            <View style={styles.page}>
                <Text style={styles.text}>{data + ' pageID: ' + pageID}</Text>
            </View>
        );
    },

    _onChangePage: function ( page:number ) {
        notifyMessage ('Current page: ' + page);
    },

And don´t forget to require the node module:

var ViewPager = require ('react-native-viewpager');

Let me know if you found out how to fix the ViewPagerAndroid...