it-swarm.com.de

Reagieren Sie die native Flexbox, die nicht den gesamten verfügbaren Platz verwendet

Ich habe ein Layout, das ich als Vollbild erstellen möchte. So sieht es jetzt aus:  enter image description here

Ich möchte, dass das Layout den gesamten Platz auf dem Bildschirm einnimmt (der Submit-Button sollte daher ganz unten sein). Ich versuche, {flex: 1} zu verwenden, aber es funktioniert nicht. Hier ist der Code:

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

Nach allem, was ich sehen kann, setze ich die flex-Eigenschaft ganz in der Ansichtshierarchie ein, aber das macht immer noch nichts (auf der obersten Ebene ist auch ein Navigator mit {flex: 1}). Irgendwelche Vorschläge?

12
Hugo

Was Sie wollen, ist die contentContainerStyle-Komponente der ScrollView-Komponente. Wenn Sie ersetzen:

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

mit:

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

Das wird dein Problem beheben.

Wie angegeben im Dokument :

Diese Stile werden auf den Inhaltscontainer für die Bildlaufansicht angewendet, der alle untergeordneten Ansichten einschließt.

Ich hoffe es hilft!

12
VonD

Wenn die Farben im Screenshot genau sind, nimmt Ihr ScrollView bereits den gesamten vertikalen Abstand ein, der Container jedoch nicht (Containerhintergrundfarbe ist weiß). Dies veranschaulicht, wie Scrollansichten funktionieren. Sie fungieren als Container, in denen die Kinder durch Flex nicht wirklich in den vertikalen Raum passen können, da sie möglicherweise unendlich sind. Stattdessen werden die Kinder in ihrer natürlichen Höhe dargestellt. http://devdocs.io/react_native/scrollview

verwenden Sie stattdessen eine Ansicht, die die gesamte Bildschirmhöhe einnimmt.

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

Sie müssen eine flexDirection: 'row'-Eigenschaft für den äußersten Container festlegen:

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

Ich habe eine Basisversion Ihrer App hier eingerichtet. Der Rest des Codes wird unten für das vollständige Arbeitsbeispiel eingefügt:

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);
0
Nader Dabit