動的ページビューを使用してネイティブViewPagerAndroidに反応する

Question

私はViewPagerAndroidを自分のコンポーネントの1つに実装しています。ページャの子ページビューは動的です（多分問題ですか？）アンドロイドのエラー '指定された子が既に親を持っています。子の親のfirstViewでremoveView（）を呼び出す必要があります。ここにコンポーネントがあります：

var PageContent = React.createClass({ 
    propTypes: { 
     page: React.PropTypes.oneOfType([ 
      React.PropTypes.object, React.PropTypes.bool 
     ]), 
     pageNext: React.PropTypes.oneOfType([ 
      React.PropTypes.object, React.PropTypes.bool 
     ]), 
     pagePrevious: React.PropTypes.oneOfType([ 
      React.PropTypes.object, React.PropTypes.bool 
     ]), 
     positionY: React.PropTypes.object, 
     positionYNext: React.PropTypes.object, 
     positionYPrevious: React.PropTypes.object, 
     pageDensity: React.PropTypes.number, 
     updatePage: React.PropTypes.func 
     }, 
     initialPageIndex() { 
     if (this.props.page.number === 1) 
      return 0; 
     return 1; 
     }, 
     onPageSelected(e) { 
     var initialPageIndex = this.initialPageIndex(); 
     var position = e.nativeEvent.position; 
     console.warn(position); 
     // The initial page can have an index in the PageViewer 
     // of zero or one, so we must determine the new page number 
     // by checking the viewer position in terms of the true pages array. 
     if (position < initialPageIndex) { 
      // the user turned to the previous page! 
      this.props.updatePage(this.props.page.number - 1); 
     } else if (position > initialPageIndex) { 
      // the user turned to the next page! 
      this.props.updatePage(this.props.page.number + 1); 
     } 
     }, 
     render() { 
     var pagePrevious = this.props.pagePrevious; 
     var page = this.props.page; 
     var pageNext = this.props.pageNext; 
     var pageViews = [pagePrevious, page, pageNext].map((current, i) => { 
      if (!current) return null; 
      var titles = <Titles page={current}/>; 
      var image = current.image 
      ? <Image 
       source={current.image} 
       /> 
      : null; 
      var text = <PageText page={current} pageDensity={this.props.pageDensity}/> 

      var view = 
      <View key={i}> 
       {titles} 
       {image} 
       {text} 
      </View>; 
      return view; 
     }).filter((current) => {return !!current}); 

     // we must dynamically determine the initial page index. 
     // Do not use state because we can derive this from the current page state. 
     var initialPageIndex = this.initialPageIndex(); 

     return (
      <View style={styles.containerViewPager}> 
      <ViewPagerAndroid 
       style={styles.viewPager} 
       initialPage={initialPageIndex} 
       pageMargin={10} 
       onPageSelected={this.onPageSelected}> 
       {pageViews} 
      </ViewPagerAndroid> 
      </View> 
     ); 
     } 
    }); 

各動的ページビューのキープロパティを設定しています。ページビューアは動的ページをサポートしていますか？

Answer 1

ViewPagerAndroidコンポーネントの使用方法には多くの問題がありました。私はページビューデータの読み込みを遅らせようとしていました（現在のページに隣接している場合はページのデータを読み込むだけです）。私の考えは、いつでもページビューの数を必要なものに制限することでした。

しかし、異なる子ビューコンポーネントのスワップを開始すると、ViewPagerAndroidは妙に動作します。追加のページビューを動的に追加するのはまったく問題ありませんが、ページビューで新しいキー属性を渡すときに破損します。意味あり。ページャはユーザインタラクションとページの変更を処理するように設計されており、必要な作業を行うためにフックすることができます。概念的には、私は、各状態の変更時に全く新しいページャを構築しようとしていました。

解決策は、ページビューで遅延読み込みを心配することです。ポケベルにあなたのアプリに必要なビューを与え、それらの子ビューがコンテンツを管理できるようにします。子ページビューが変更されておらず、それぞれがレイジーローディング（ページャ内のユーザーの位置に基づいて）の例です：

var TestPagerAndroid = React.createClass({ 
    getInitialState() { 
    return { 
     currentPage: 0 
    }; 
    }, 
    isAdjacentPage(pageNumber) { 
    var currentPage = this.state.currentPage; 
    var adjacentPages = [currentPage - 1, currentPage, currentPage + 1]; 
    return pageNumber >= 0 && pageNumber <= BOOK_LENGTH 
     && adjacentPages.indexOf(pageNumber) !== -1; 
    }, 
    getPageContent(pageNumber) { 
    console.warn('store access count'); 
    var store = MOCK_DATA_STORE; 
    return <Text>{store[pageNumber]}</Text>; 
    }, 
    onPageSelected(e) { 
    var currentPage = e.nativeEvent.position; 
    this.setState({ currentPage }); 
    }, 
    render() { 
    var pageViews = []; 
    for (let i=0; i <= BOOK_LENGTH; i++) { 
     pageViews.push(
     <View style={styles.container} key={i}> 
      <TestPageView 
      pageNumber={i} 
      isAdjacentPage={this.isAdjacentPage} 
      getPageContent={this.getPageContent} 
      /> 
     </View> 
    ); 
    } 
return (
     <View style={styles.containerViewPager}> 
     <ViewPagerAndroid 
      style={styles.viewPager} 
      initialPage={0} 
      pageMargin={10} 
      onPageSelected={this.onPageSelected}> 
      {pageViews} 
     </ViewPagerAndroid> 
     </View> 
    ); 
    } 
}); 

var TestPageView = React.createClass({ 
    render() { 
    var pageNumber = this.props.pageNumber; 
    var isAdjacent = this.props.isAdjacentPage(this.props.pageNumber); 
    var content = isAdjacent 
     ? this.props.getPageContent(pageNumber): null; 
    return (
     <View> 
     {content} 
     </View> 
    ); 
    } 
});