反应本机 ViewPagerAndroid 错误答案

【问题标题】：React Native ViewPagerAndroid error反应本机 ViewPagerAndroid 错误
【发布时间】：2015-10-21 05:25:05
【问题描述】：

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

编辑

react-native 0.13.0-rc

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

下面是原帖

反应原生 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>
    );
  },

【问题讨论】：

我在 0.13.0-rc 中遇到了同样的错误 - 在 build.gradle 中将依赖项从 compile 'com.facebook.react:react-native:0.12.+' 增加到 compile 'com.facebook.react:react-native:0.13.+' 解决了它
我得到了他们的例子。仅测试了 Prev 和 Next

标签： android react-native

【解决方案1】：

我遇到了完全相同的问题，但无法解决。但也许你想使用 react-native-viewpager，它适用于 iOS 和 Android。你可以得到它here：

使用起来真的很容易......以下适用于我的 Android 和 iOS 应用程序：

1.定义您的页面/视图

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

2。然后在 getInitialState 函数中设置数据源：

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

别忘了要求 node 模块：

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

如果您知道如何修复 ViewPagerAndroid，请告诉我...

【讨论】：