react-native - 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>

问题是，在模拟器本地，我得到了绿屏( subview 甚至没有出现在元素检查器中)。

关于facebook tutorials结果不同:

为什么它的工作方式不同？

Answer 1

您遇到的差异实际上是 React Native Web 之间的差异，官方 React Native 文档在其示例中使用它，以及 React Native。

鉴于 React Native Web 并不直接依赖 React Native 作为依赖项，这种不一致很可能是由于 <ScrollView> 的不同实现造成的。组件以及如何处理和/或传播样式属性。

一般来说，如果官方文档中提供的示例也有显示结果的设备，我不会理所当然地认为它们，因为这些示例很可能是为在 React Native Web 上工作而定制的，这可能会也可能不会(就像在本例中一样)表现得像 React Native。

详细信息

React Native 的 <ScrollView>实际上将 subview 包装成 <ScrollContentContainerViewClass> ，因此需要区分 ScrollView 本身的样式(通常 style 属性)和此包装器的样式(@yangguang1029's answer 中提到的 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>
);

来源:React Native ScrollView source on GitHub