Reagieren native dynamische Laufzeit UI Erstellung

Question

In meiner Anwendung muss ich eine einfache dynamische UI erstellen, die aus einem Inhalt erstellt werden muss, der vom Server kommt. Gibt es eine Möglichkeit, eine Ansicht aus einem String-Inhalt zu rendern?

Answer 1

Ich render verschiedene UI-Steuerelemente auf dem Bildschirm, basierend auf Typ-Attribut, das ich vom Server bekomme. Ich bin mit Listview wie folgt

<ListView 
enableEmptySections = {true} 
style={{flex:1}} 
dataSource={ds.cloneWithRows(data)} 
renderRow= 
{ 
(data, secId, rowId, rowMap) => 
    { 
return this.renderRow(data, secId, rowId, rowMap); 
    } 
} 
/> 

Die Daten, die ich vom Server erhalten, ist in folgendem Format

[{type: 'Text', Label: 'label1'}, {type: ‚Checkbox ', Label:' Label2 '}];

im renderRow Methode, basierend auf dem Datentyp I verschiedener UI-Steuerelemente

renderRow(data, secId, rowId, rowMap) { 
    if (data.type=='Text') 
    { 
    var contentRow = <TextInput style={styles.InputRowBox} />; 
    return (contentRow); 
    } 
    else if (data.type=='CheckBox') 
    { 
    var notificationRow = <CheckBox style={styles.checkboxStyle} /> 
    return (notificationRow); 
    } 
} 

Anmerkung machen: Für die Checkbox Kontrolle zu arbeiten, benötigen Sie Checkbox Paket hinzuzufügen, habe ich von diesen link