Reagieren Native: Festlegen von flex:1 auf eine ScrollView contentContainerStyle Ursachen von überlappenden Komponenten

Ok, so war ich nicht in der Lage, um es arbeiten von styling allein, aber hier ist, wie ich es gemacht habe:

1. Messen Sie die Höhe der Fußzeile, nachdem es gerendert (mit onLayout, und measure)
2. auf die measure Rückruf, füge ich die Höhe (falls erforderlich), um ein spacer-Ansicht zwischen ViewA und ViewB um ViewB auf der Unterseite.
3. Um zu vermeiden, zeigen 'springt' zu dem Benutzer, Verstecke ich mich (mit opacity) ViewB bis zu seiner position fixiert.

meine CJSX-code (abgespeckte und vereinfachte version):

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')

Es ist sehr vereinfachten code, ist (meiner Ansicht nach hat die Anforderungen viel mehr spezifische dann dieser..), aber ich hoffe, es hilft jemand.

InformationsquelleAutor David Avikasis