Question

有没有人成功使用ViewPagerAndroid组件？

编辑

react-native 0.13.0-rc

我得到的错误是： No ViewManager defined for class AndroidViewPager

以下原始帖子

react-native 1.2.0

我一直收到这个错误：

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

我像UIExplorer示例中那样繁琐地尝试了他们的代码，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

我有完全相同的问题，并且无法修复它。但也许你想使用react-native-viewpager，它适用于iOS和Android。你可以得到它here：

使用起来非常简单......以下适用于我的Android和iOS应用程序：

<强> 1。定义您的页面/视图

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

<强> 2。然后在getInitialState函数中设置dataSource：

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

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

第3。在你的渲染方法中：

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

<强> 4。然后渲染你的页面：

     _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);
    },

不要忘记要求节点模块：

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

如果您发现了如何修复ViewPagerAndroid ......请告诉我。

React Native ViewPagerAndroid错误

1 个答案: