2016-06-23 16 views
0

反応固有の最後のリリース0.27> 0.28(およびReact 15.0.2> 15.1 0.0)垂直方向と水平方向の両方にスクロール可能なコンテンツを含むリストビューは、現在のみ一方向のみにスクロールさせることができる。スクロール可能なコンテンツを持つネイティブListViewを、垂直方向と水平方向の両方で反応させても、反応ネイティブ0.28(反応15.1.0)では機能しないように見える

  • リストビューが=「行」flexDirectionで定義されている場合、リストビューをスクロールすることができます水平になっていますが、固定高さ位置に戻ってリバウンドして、listViewに垂直方向に何が含まれているのかを確認することはできません。

  • listViewがflexDirection = "column"で定義されている場合、listViewは垂直方向にスクロールすることができます。

サンプル:

export default React.createClass({ 
... 

render():View { 
    return(
    <ListView 
     decelerationRate     = "fast" 
     snapToAlignment     = "start" 
     dataSource      = {this.state.dataSource} 
     style        = {styles.listView} 
     renderRow       = {this._getColumn} 
     initialListSize     = {100} 
     scrollEnabled      = {true} 
     horizontal      = {true} 
     pagingEnabled      = {false} 
     showsHorizontalScrollIndicator = {false} 
     showsVerticalScrollIndicator  = {false} 
     removeClippedSubviews    = {true} 
     automaticallyAdjustContentInsets = {true} 
     alwaysBounceVertical    = {true} 
     alwaysBounceHorizontal   = {true} 
     bouncesZoom      = {false} 
     canCancelContentTouches   = {true} 
     centerContent      = {false} 
     directionalLockEnabled   = {true} 
    /> 
    ); 
}, 

... 

_getColumn(el:Array<Object>, sectionID:string, rowID:string):View { 
    return(
    <View 
     key = {"row-`$(sectionID)`:`$(rowID)`"} 
     style = {styles.column} 
     > 
     ... 
     </View> 
    ); 
}, 

... 

}); 

const styles:StyleSheet = StyleSheet.create({ 
    listView: { 
    position   : "relative", 
    flexDirection  : "row", // <---------- 'row' || 'column' 
    flexWrap   : "wrap", 
    alignSelf   : "stretch", 
    top    : 0, 
    width    : 380, 
    height   : 600, 
    backgroundColor : "transparent", 
    overflow   : "hidden", 
    }, 
    column: { 
    flex    : 1, 
    flexDirection  : "row", 
    alignSelf   : "stretch", 
    alignItems  : "flex-start", 
    justifyContent : "flex-start", 
    backgroundColor : "red", 
    position   : "relative", 
    width    : 380/3, 
    height   : 1250, 
    }, 


}); 

、前と15.0.2を反応させて反応ネイティブ期待どおりに働い0.26:リストビュー内に出現した列に水平および垂直移動することが可能でした。

StyleSheetの設定方法に問題はありますか? 多くの組み合わせをテストしましたので、スタイルシートの引数はまだstyles.listViewとstyles.columnで使用されています。

答えて

0

これはあなたのスタイルシートに関するものかもしれません。 0.28:

フレックススタイリングプロパティの動作が少し異なるようになりました。以前にflex:1を使用していた場合は、パフォーマンスの最適化のために測定動作が以前と若干異なるため、この変更はレイアウトを破壊する可能性があります。その不要なflex:1を削除すると、ほとんどの場合レイアウトが解決されます。

original release notes

これは、あなたがそこに持っているものを正確ではありませんが、それが関係している可能性があります。

関連する問題