2015-10-21 2 views
0

Кто-нибудь был успешным в использовании компонента ViewPagerAndroid?React Native ViewPagerAndroid error

EDIT

реагируют родной 0.13.0-гс

Ошибка я получаю: 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.

Я попробовал свой код exatly, как в примерах 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

У меня была такая же ошибка в 0.13.0-rc - bumping зависимость от 'compile 'com.facebook.react: react-native: 0.12. +'' To 'compile 'com.facebook.react: react-native: 0.13. + '' In 'build.gradle' решил это – Thomas

+0

Я получил свой пример. Только проверенные ** Prev ** и ** Next ** –

ответ

2

У меня был точно такой же вопрос, и coudn't исправить это. Но, возможно, вы захотите использовать action-native-viewpager, который отлично работает для iOS и Android. Вы можете получить его here:

подмигнули очень легко работать ... Следующие работы в моей Android и IOS App:

1. Определите ваши страницы/Просмотров

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

2. Затем установите DataSource в вашей 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); 
    }, 

И не забывайте требовать модуль узла:

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

Дайте мне знать, если вы обнаружили, как исправить ViewPagerAndroid ...

Смежные вопросы