Est-il possible de créer dynamiquement des composants de Réagir Natif?

Est-il possible de créer dynamiquement et ajouter de voir les composants de Réagir Natif?
Par exemple, tout d'abord je dois seulement vide de l'écran et de l'information de tous les points de vue viennent de serveur en JSON, et il est alors nécessaire de les générer sur l'écran.
Par exemple - application mise en json à partir du serveur. Cette json décrit l'écran qui doivent se nouer:

{
    "type": "linearlayout",
    "subviews": [{
        "type": "text",
        "fields": {
            "text": "This is text field"
        },
        "styles": {
            "color": "",
            "textSize": 14
        }
    }, {
        "type": "button",
        "fields": {
            "text": "JUST BUTTON"
        },
        "transition": {
            "name": "http://www.link.com"
        }
    }, {
        "type": "text",
        "fields": {
            "text": "This is another text field"
        },
        "styles": {
            "color": "",
            "textSize": 18
        }
    }]
}

Donc, par cette JSON j'ai besoin dynamiquement des vues du bâtiment de Réagir Natif. Mais je ne vois aucune possibilité d'écrire du code JS à l'intérieur de JSX - seulement des vues statiques et l'évolution dynamique des accessoires

Avez-vous trouver une solution pour cela? Je suis également à la recherche de quelque chose de similaire.

OriginalL'auteur Natan Rubinstein | 2017-02-05

dynamic react-native

10

Oui, c'est possible. Supposons que vous récupérer vos données JSON avec succès et l'enregistrer dans un certain état puis dans votre fonction rendu vous pouvez l'utiliser comme ça;
```
render() {
    var productList = [];

        this.state.data.products.forEach(function (tmpProduct) {
            productList.push(
                <View style={cardView} key={tmpProduct.id}>

                    <Grid style={upperGrid}>
                        <Col style={{flex: 0.5}}>
                            <Thumbnail
                                source={require('../../../images/sample-image.png')}
                                style={itemThumb}>
                        </Col>
                        <Col>
                            <Text style={cardItemHeader} numberOfLines={2}>{tmpProduct.title}</Text>
                            <Text style={cardItemBody} numberOfLines={2}>{tmpProduct.description}</Text>
                        </Col>
                    </Grid>
                </View>
            );
        }.bind(this));

    return (
        <Container theme={theme}>
            <Image source={require('../../../images/grad-bg.png')} style={background} >

                <Content style={scrollContent}>

                    {productList}

                </Content>

            </Image>
        </Container>
    )
}
```
J'espère que ce morceau de code vous donner une idée. Vous pouvez l'adapter à votre cas.

Je vous remercie par exemple. Mais mon besoin n'est pas la même - vous définissez les propriétés pour déjà créé des points de vue. Avant de commencer l'application vous savez ce point de vue sera créé, et vous les décrire dans le code (Image, Texte, Conteneur...). Mais dans mon cas - je ne sais pas ce point de vue sera créé, parce que toutes les informations sur les types (est-il un Texte ou une Image, ou d'un Bouton) viendra du serveur après chargement de l'application.
Je vois, mais même dans votre cas, vous devriez mieux définir les composants et ensuite sélectivement les utiliser dans votre fonction rendu. Vous pouvez la lire ceci et ceci pour plus d'.
Puis-je demander à monsieur pourquoi avez-vous préciser la clé pour chaque produit?
Est-il pour obtenir l'id de produit sur l'élément sélectionné?
Vous feriez mieux de lire ceci. Fondamentalement key prop est utilisé pour différencier des simples anonymes composants dans des tableaux tout en rendant ces tableaux sous forme de listes.

OriginalL'auteur milkersarac
0

Oui, il est possible de créer dynamiquement des composants de Réagir Natifs basés sur les données vous récupérer à partir du serveur.

Toutefois, si vous êtes désireux de l'application pour rechercher la dernière version du code JS (y compris les nouveaux composants/vues) sans nécessiter une mise à jour via l'app store, vous pouvez utiliser quelque chose comme code-push. https://microsoft.github.io/code-push/

Votre question est un peu vague, donc si j'ai mal compris alors peut-être vous donner un exemple 'information de tous les points de vue".

J'ai ajouté quelques explications sur ma question

OriginalL'auteur Travis White
0

L'un des avantages de l'utilisation de réagir natif (vs webview), c'est que vos utilisateurs ne serez pas à regarder vide écrans lorsque le chargement de l'application les données. Si vous revenez tous les points de vue du serveur, puis il travaille comme page web. J'ai fait quelque chose comme ça avant. Croyez-moi que ce n'est pas le meilleur UX. Idéalement réponse json ne doit renvoyer les données. Ensuite, le client peut être construit avec un framework (réagir native native iOS ou Android) et qu'ils partagent la même API points de terminaison.

OriginalL'auteur Haitao Li
0

Réagir docs (et, par extension, il pourrait être fait avec ReactNative trop) montrent comment choisir le type de composant à l'exécution:
```
import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}
```
De le faire, vous pourriez juste besoin de marcher sur votre JSON arbre et il suffit de créer le ReactNative composants, à l'aide de la components objet comme une correspondance entre le type est défini dans le JSON de l'arbre et leurs constructeurs.

OriginalL'auteur Piranna

Vous devez vous connecter pour publier un commentaire.