Question

由于反应原生的最后一次释放0.27> 0.28（和React 15.0.2> 15.1.0）包含垂直和水平可滚动内容的ListView现在只能在一个方向上滚动：

如果listView是使用flexDirection =＆＃34; row＆＃34;定义的，则listView可以水平滚动但反弹回固定高度位置，防止查看listView垂直包含的内容。
如果listView是使用flexDirection =＆＃34;列＆＃34;定义的，则listView可以垂直滚动但反弹回固定宽度位置，防止看到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,
   },


});

之前，使用React 15.0.2和react-native 0.26，它按预期工作：可以在listView中出现的列中水平和垂直导航。

我设置StyleSheet的方式有什么问题吗？我已经测试了很多组合，所以在styles.listView和styles.column中仍然使用了一些额外的（可能不是必需的）StyleSheet参数......

Answer 1

也许这是关于你的样式表。从破坏变化引用到0.28：

flex样式属性行为现在表现略有不同。如果您之前使用过flex：1，那么由于性能优化，此更改可能会破坏您的布局，因为测量行为与之前略有不同。删除不必要的flex：1将在大多数情况下解决您的布局。

original release notes

这不完全是你所拥有的，但它可能是相关的。

将本机ListView与垂直和水平的可滚动内容进行反应似乎不再使用react-native 0.28（反应15.1.0）

1 个答案: