Reagieren-Native Aufzählungen mithilfe von flex-wrap

Ich versuche zum erstellen einer Aufzählung, die wie folgt aussieht:

Aber ich bin am Ende mit diesem statt:

Reagieren-Native Aufzählungen mithilfe von flex-wrap

Reagieren,-Muttersprachler scheint nicht, wie mein Gebrauch von verschachtelten flex-Boxen. Aber ich bin mir nicht sicher, wie ich das Ausdrücken der Notwendigkeit, für alle 3 line-Elemente (Kugel, Fett text und normalen text) angezeigt werden, die inline und auf die nächste Zeile umbrochen, wenn nötig.

Hier ist meine reagieren-native-code:

var styles = StyleSheet.create({
    textWrapper: {
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flexDirection: 'row',
    },
    textBlock: {
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        flexDirection: 'row'
        position: 'absolute',
        left: 10
    },
    boldText: {
        fontWeight: 'bold',
    },
    normalText: {
    }
});

<View style={ styles.textWrapper }>
    <Text>{'\u2022'}</Text>
    <View style={ styles.textBlock }>
        <Text style={ styles.boldText }>{categoryName + ':'}</Text>
        <Text style={ styles.normalText }>{value}</Text>
    </View>
</View>

InformationsquelleAutor Wookiem | 2016-11-05

react-native

Hier ist, was ich schließlich auch kam... ich brauchte, um die Kugel und Kugel-text in separate Spalten. Ich bin mir nicht sicher, warum ich hatte, zu geben Sie eine Breite für die Spalte, ohne die Breite aus oder mithilfe von flex: 1 hat bei mir nicht funktioniert.

Danke an Nader für die Annahme, verschachtelte Text-Blöcke, die Bestandteil der Lösung.

var styles = StyleSheet.create({
    column: {
        flexDirection: 'column',
        alignItems: 'flex-start',
        width: 200
    },
    row: {
        flexDirection: 'row',
        alignItems: 'flex-start',
        flexWrap: 'wrap',
        flex: 1
    },
    bullet: {
        width: 10
    },
    bulletText: {
        flex: 1
    },
    boldText: {
        fontWeight: 'bold'
    },
    normalText: {
    }
});

<View style={ styles.column }>
    <View style={ styles.row }>
        <View style={ styles.bullet }>
            <Text>{'\u2022' + " "}</Text>
        </View>
        <View style={ styles.bulletText }>
            <Text>
                <Text style={ styles.boldText }>{keyString + ": "}</Text>
                <Text style={ styles.normalText }>{textEntry}</Text>
            </Text>
        </View>
    </View>
</View>

InformationsquelleAutor Wookiem

1

Versuchen Sie wickelte Sie alle in einem einzigen text-block:
```
<View style={ styles.textBlock }>
    <Text>{'\u2022'}
      <Text style={ styles.boldText }>{categoryName + ':'}</Text>
      <Text style={ styles.normalText }>{value}</Text>
    </Text>
</View>
```
- Dieser Vorschlag resultiert im text fortfahren, nachdem die Kugel (wie gewünscht), aber Textumbruch funktioniert nicht (d.h. der text wird einfach abgeschnitten am rechten Rand).
- Möglicherweise müssen Sie zum hinzufügen von flex-wrap nun, wenn das der Fall ist.
- toll, upvote .. ich brauche eine Beratung: als eine top-user in reagieren native - tag, denken Sie, ist das lernen Wert?! Jemand sagt, es ist perfekt, jemand anderes sagt, das ist eine schreckliche Idee .. Also ich bin verwirrt, ich möchte, um eine mobile Anwendung (sowohl für Android-und iOS-Betriebssysteme), nun, ist es möglich, um professionelle apps von reagieren native? Oder reagieren die einheimischen nur lässt uns Anfänger apps? Auch was über die Qualität der apps, die erstellt wurden durch reagieren native? Dank
- dein Vorschlag funktioniert nicht. Haben Sie den vollständigen code zu arbeiten?
InformationsquelleAutor Nader Dabit

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.