React flex box nativo che non utilizza tutto lo spazio disponibile

Question

Ho un layout che voglio rendere a schermo intero. Ecco come appare adesso:

Quello che voglio è che il layout occupi tutto lo spazio sullo schermo (quindi il pulsante di invio dovrebbe essere in basso nella parte inferiore). Sto cercando di usare {flex: 1} ma non funziona. Ecco il codice:

'use strict'; 

const React = require('react-native'); 
const { 
    StyleSheet, 
    Text, 
    View, 
    BackAndroid, 
    TextInput, 
    TouchableNativeFeedback, 
    ScrollView 
} = React; 

const ActionButton = require('./action-button'); 

module.exports = React.createClass({ 
    handleBackButtonPress() { 
    if (this.props.navigator) { 
     this.props.navigator.pop(); 
     return true; 
    } 

    return false; 
    }, 

    componentWillMount() { 
    BackAndroid.addEventListener('hardwareBackPress', this.handleBackButtonPress); 
    }, 

    componentWillUnmount() { 
    BackAndroid.removeEventListener('hardwareBackPress', this.handleBackButtonPress); 
    }, 

    onInputFocus (refName) { 
    setTimeout(() => { 
     let scrollResponder = this.refs.scrollView.getScrollResponder(); 
     scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
     React.findNodeHandle(this.refs[refName]), 
     0, 
     true 
    ); 
    }, 50); 
    }, 

    render: function() { 
    return (
     <ScrollView ref='scrollView' style={styles.scroller}> 
     <View style={styles.container}> 
      <View style={styles.header}> 
      <Text>New Post</Text> 

       <View style={styles.actions}> 
       <ActionButton handler={this.handleBackButtonPress} icon={'fontawesome|close'} 
        size={15} width={15} height={15} /> 
       </View> 
      </View> 
      <View style={styles.content}> 
      <TextInput underlineColorAndroid={'white'} 
       placeholder={'Who\'s your professor?'} 
       ref='professor' 
       onFocus={this.onInputFocus.bind(this, 'professor')} 
       style={styles.professor} 
       /> 

      <TextInput multiline={true} 
       underlineColorAndroid={'white'} 
       placeholder={'What do you think?'} 
       ref='post' 
       onFocus={this.onInputFocus.bind(this, 'post')} 
       style={styles.post} 
       /> 
      </View> 
      <View style={styles.footer}> 
      <TouchableNativeFeedback 
       background={TouchableNativeFeedback.SelectableBackground()}> 

       <View style={{width: 50, height: 25, backgroundColor: 'green'}}> 
       <Text>Submit</Text> 
       </View> 
      </TouchableNativeFeedback> 
      </View> 
     </View> 
     </ScrollView> 
    ); 
    } 
}); 

const styles = StyleSheet.create({ 
    scroller: { 
    flex: 1, 
    flexDirection: 'column' 
    }, 
    container: { 
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'flex-start', 
    backgroundColor: 'white', 
    padding: 5, 
    }, 
    post: { 
    flex: 3 
    }, 
    professor: { 
    flex: 1 
    }, 
    actions: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'flex-end', 
    alignSelf: 'center' 
    }, 
    header: { 
    flex: 1, 
    padding: 5, 
    flexDirection: 'row' 
    }, 
    content: { 
    flex: 4 
    }, 
    footer: { 
    flex: 1 
    } 
}); 

Da quello che posso vedere, sto impostando la proprietà flex fino in fondo alla gerarchia vista, ma che ancora non sta facendo nulla (al livello superiore è un navigatore con {flex : 1} pure). Eventuali suggerimenti?

Answer 1

è necessario impostare un flexDirection: la proprietà 'fila' per il contenitore più esterno:

scroller: { 
    flex:1, 
    flexDirection: 'row' 
} 

ho creato una versione di base della vostra applicazione here. Il resto del codice è incollato al di sotto per l'esempio di lavoro completo:

https://rnplay.org/apps/gjBqgw

'use strict'; 

var React = require('react-native'); 
var { 
    StyleSheet, 
    Text, 
    View, 
    BackAndroid, 
    TextInput, 
    TouchableNativeFeedback, 
    ScrollView, 
    AppRegistry, 
    TouchableHighlight 
} = React; 

var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <ScrollView ref='scrollView' style={styles.scroller}> 
     <View style={styles.container}> 
      <View style={styles.header}> 
      <Text>New Post</Text> 

       <View style={styles.actions}> 
       <TouchableHighlight handler={this.handleBackButtonPress} icon={'fontawesome|close'} 
        size={15} width={15} height={15}> 
          <Text>Button Text</Text> 
         </TouchableHighlight> 
       </View> 
      </View> 
      <View style={styles.content}> 
      <Text>Hello from content</Text> 
      </View> 
      <View style={styles.footer}> 
      <TouchableHighlight> 

       <View style={{width: 50, height: 25, backgroundColor: 'green'}}> 
       <Text>Submit</Text> 
       </View> 
      </TouchableHighlight> 
      </View> 
     </View> 
     </ScrollView> 
    ); 

    } 
}); 

const styles = StyleSheet.create({ 
    scroller: { 
    flex:1, 
    flexDirection: 'row' 
    }, 
    container: { 
    flex: 1, 
    backgroundColor: 'white', 
    padding: 5, 
    }, 
    post: { 
    flex: 3 
    }, 
    professor: { 
    flex: 1 
    }, 
    actions: { 
    flex: 1, 
    flexDirection: 'row', 
    alignSelf: 'center' 
    }, 
    header: { 
    flex: 1, 
    padding: 5, 
    flexDirection: 'row' 
    }, 
    content: { 
    flex: 4 
    }, 
    footer: { 
    flex: 1, 
    } 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp); 

Answer 2

Se i colori sono precisi nello screenshot, il vostro ScrollView sta prendendo tutto lo spazio verticale, già, ma il contenitore è non (il colore di sfondo del contenitore è bianco). Questo illustra come funzionano le immagini a scorrimento. Agiscono come contenitori in cui il flex non può realmente far crescere i bambini per adattarsi allo spazio verticale in quanto potenzialmente infinito. Invece i bambini sono resi alla loro altezza naturale. http://devdocs.io/react_native/scrollview

provare invece utilizzando una vista che occupa l'intera altezza dello schermo.

<View style={styles.container}> 
    ... components here ... 
</View> 
const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'space-between' 
    } 
}) 

Answer 3

quello che vuoi è la contentContainerStyle puntello del componente ScrollView. Se si sostituisce:

<ScrollView ref='scrollView' style={styles.scroller}> 

con:

<ScrollView ref='scrollView' contentContainerStyle={styles.scroller}> 

che risolverà il vostro problema.

Come dichiarato in the doc: verranno applicate al contenitore contenuti vista di scorrimento che avvolge tutti i punti di vista del bambino

Questi stili.

Spero che sia d'aiuto!