Reactnative React Native：在 ScrollView contentContainerStyle 上设置 flex：1 会导致组件重叠

发布于11月19日

问题:

我有一个包含两个子视图的ScrollView，我希望第一个子视图(我们称之为ViewA)有{flex:1}，所以另一个子视图(ViewB)将粘在屏幕底部，但前提是它们的总高度小于屏幕.当然，如果它们高于屏幕，我希望它像往常一样滚动.

case 1(好):ViewA带有长文本，ViewB带有长文本滚动.https://rnplay.org/apps/slCivA

case 2(错误):带有短文本的ViewA，ViewB不会粘在底部.https://rnplay.org/apps/OmQakQ

try 过的解决方案:

所以我将ScrollView的style和contentContainerStyle设置为flex:1.我

case 3(糟糕):ViewB贴在底部，但整个画面不会滚动.https://rnplay.org/apps/wZgtWA

如果是bug-如何修复/解决？

谢谢

推荐答案

好吧，所以我无法单独通过造型来实现它，但我是这样做的:

渲染后测量页脚的高度(使用onLayout和measure)
在measure回调中，我将高度(如果需要)添加到ViewA和ViewB之间的间隔视图中，以便将ViewB放置在底部.
为了避免向用户显示" skip "，我隐藏(不透明度)ViewB，直到其位置固定.

我的CJSX代码(精简版):

Dimensions = require('Dimensions')
windowSize = Dimensions.get('window')

MyClass = React.createClass
  mixins: [TimerMixin]

  render: ->
    <ScrollView style={styles.container} automaticallyAdjustContentInsets={false}>
      <View style={styles.mainContainer}>
        ... THIS IS VIEW A ...      
      </View>
      {
        if !@state.footerWasFixed
          <View>
            <ActivityIndicatorIOS/>
          </View>
      }
      <View style={[styles.spacer, {height: @state.spacerSize || 0}]}></View>
      <View onLayout={@measureFooterPosition} style={[styles.extras, {opacity: if @state.footerWasFixed then 1 else 0 }]} ref='extras'>
        ... THIS IS VIEW B ...       
      </View>
    </ScrollView>


  measureFooterPosition: ->
    @refs.extras.measure(@fixFooterPosition)

  fixFooterPosition: (ox, oy, width, height) ->
    footerPosition = Math.round(oy + height)
    diff = windowSize.height - footerPosition
    if diff > 0
      @setState(spacerSize: diff)
    if !@state.footerWasFixed
      @setTimeout (=>
        @setState(footerWasFixed: true)
      ), 30

styles = StyleSheet.create(
  container:
    backgroundColor: 'grey'
    flex: 1
  spacer:
    backgroundColor: 'white'
  mainContainer:
    flex: 1
    backgroundColor: 'white'
  extras:
    backgroundColor: 'white')

这是一个非常简单的代码(我的观点要求比这更具体)但我希望它能帮助任何人.