wake-up-neo.net

Wie rechtfertigt (links, rechts, zentriert) jedes Kind unabhängig?

In reagieren nativ habe ich:

<View style={styles.navBar}>
  <Text>{'<'}</Text>
    <Text style={styles.navBarTitle}>
      Fitness & Nutrition Tracking
    </Text>
  <Image source={icon} style={styles.icon}/>
</View>

mit diesen Stilen:

{
    navBar: {
        height: 60,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    navBarTitle: {
        textAlign: 'center',
    },
    icon: {
        height: 60,
        resizeMode: 'contain',
    },
}

Das ist der Effekt, den ich bekomme:

 undesired

Das ist der Effekt, den ich möchte:

 desired

Im ersten Beispiel ist der Abstand zwischen den Elementen gleich.

Im zweiten Beispiel wird jedes Element anders gerechtfertigt. Der erste Punkt ist linksbündig. Der zweite Punkt ist in der Mitte ausgerichtet. Der dritte, richtig begründet.

Diese Frage ist ähnlich, aber es sieht so aus, als würde native reagieren margin: 'auto' nicht unterstützen. Darüber hinaus funktionieren die anderen Antworten nur, wenn Sie sich nur für die linke und rechte Ausrichtung interessieren, aber niemand spricht wirklich die zentrierte Ausrichtung ohne automatischen Rand an.

Ich versuche, eine Navigationsleiste in reagieren zu lassen. Die Vanilla ios-Version sieht folgendermaßen aus:

 ios

Wie mache ich etwas Ähnliches? Mir geht es hauptsächlich um das Zentrieren.

30
Croolsby

Eine Möglichkeit besteht darin, die verschachtelte Ansicht (Flex-Container) für 3 verschiedene Regionen zu verwenden und flex: 1 für den linken und rechten Bereich festzulegen

<View style={styles.navBar}>
  <View style={styles.leftContainer}>
    <Text style={[styles.text, {textAlign: 'left'}]}>
      {'<'}
    </Text>
  </View>
  <Text style={styles.text}>
    Fitness & Nutrition Tracking
  </Text>
  <View style={styles.rightContainer}>
    <View style={styles.rightIcon}/>
  </View>
</View>

const styles = StyleSheet.create({
  navBar: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'blue',
  },
  leftContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: 'green'
  },
  rightContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  rightIcon: {
    height: 10,
    width: 10,
    resizeMode: 'contain',
    backgroundColor: 'white',
  }
});

 enter image description here

44
agent_hunt

Wenn Sie eine Navigationsleiste aus dem Navigator-Modul verwenden, sehen Sie meine Frage: Ändern des Standardstils für einen Navigator.NavigationBar (Titel)

2
Mark Silver

Sie können auch marginLeft: 'auto' auf die mittlere Komponente setzen. Es sollte nach rechts schieben. Funktioniert auch für React Native

Quelle: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

1
to7be