Flex在facebook.io和实际应用程序React Native中的工作方式不同

Question

我正在尝试使ScrollView子级与scrollView本身具有相同的大小。该代码非常简单：

  <View style={{ flex: 1 }}>
    <ScrollView style={[{ flex: 1, backgroundColor: 'green' }]}>
      <View style={{ flex: 1, backgroundColor: 'red' }}>
      </View>
    </ScrollView>
  </View>

问题是在模拟器上本地出现了绿屏（元素检查器中甚至没有显示子视图）。

在facebook tutorials上，结果是不同的：

为什么工作方式不同？

Answer 1

您遇到的差异实际上是React Native Web和React Native之间的差异，@yangguang1029's answer是官方的React Native文档在其示例中使用的。

鉴于React Native Web并不直接依赖于React Native作为依赖，这一矛盾很可能是由于<ScrollView>组件的不同实现以及样式道具的处理和/或传播方式

通常，如果官方文档中也提供了可以显示结果的设备，那么我不会认为这些示例是理所当然的，因为这些示例很可能是为在React Native Web上量身定制的，无论是否可以（例如在这种情况下）的行为类似于React Native。

详细信息

React Native的<ScrollView>实际上将子视图包装到<ScrollContentContainerViewClass>中，因此，在滚动视图本身的样式（通常为style道具）和该包装的样式（React Native ScrollView source on GitHub中提到的contentContainerStyle：

// in render function of ScrollView class.
const contentContainer = (
  <ScrollContentContainerViewClass
    style={contentContainerStyle}> // styling for inner container view.
    {children}
  </ScrollContentContainerViewClass>
);

// other operations...

return (
  <ScrollViewClass {...props} ref={this._setScrollViewRef}> // here the "style" prop is propagated.
    {contentContainer}
  </ScrollViewClass>
);

来源：{{3}}

Answer 2

将contentContainerStyle = {{flexGrow：1}}道具添加到ScrollView及其子级的flex：1可以正常工作。因此，您无需手动计算

来自帖子：Scrollview and child with flex: 1