代码之家 › 专栏 › 技术社区 › Vladyslav Zavalykhatko

Flex在facebook.io和React Native上的工作方式不同

react-native

2

Vladyslav Zavalykhatko · 技术社区 · 7 年前

我在试着 ScrollView 与scrollView本身大小相同的子对象。代码非常简单:

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

问题是,在模拟器的本地,我得到了绿色屏幕(子视图甚至没有在元素检查器中显示)。

facebook tutorials 结果不同:

2 回复 | 直到 7 年前

1

3

Matei Radu Ciaran George 7 年前

你所经历的差异实际上是 React Native Web

考虑到React Native Web并不直接依赖React Native作为依赖项,这种不一致很可能是由于 <ScrollView>

一般来说,如果官方文档中提供的示例也有显示结果的设备,我不会认为它们是理所当然的,因为这些示例很可能是为在React Native Web上工作而定制的,而React Native Web的行为可能与React Native类似,也可能与React Native不同(在本例中类似)。

反应本地人的 <滚动视图> 实际上,将子视图包装到 <ScrollContentContainerViewClass> ,因此需要区分滚动视图本身的样式(通常 style 道具)和这个包装的样式 contentContainerStyle @yangguang1029's answer :

// 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

2

0

yangguang1029 7 年前

将contentContainerStyle={{flexGrow:1}}prop添加到ScrollView及其子视图flex:1 would 工作。所以你不需要手动计算

发帖人: Scrollview and child with flex: 1