反応固有の最後のリリース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で使用されています。