web-dev-qa-db-fra.com

Quelle est la manière la plus rapide de convertir une application React en React Native?)

C'est peut-être une question naïve, mais je n'ai pas trouvé trop d'informations sur ce sujet. J'ai une application react-redux entièrement fonctionnelle et je voudrais maintenant la porter sur iOS et Android. Je n'ai pas besoin d'utiliser des fonctionnalités natives comme le GPS ou l'appareil photo, etc. En théorie, je veux juste faire une sorte de vue Web qui exécute l'application React existante, puis l'ajuster jusqu'à ce qu'elle ressemble plus) présentable. Ma première tentative a été d'utiliser simplement mon fichier jsbundle actuel et de le coller dans AppDelegate en tant que jsCodeLocation. Cela a vraisemblablement causé toutes sortes d'erreurs telles que "fenêtre" non définie.

Je suppose que ma question est: comment les gens gèrent-ils généralement leurs bases de code natives et non natives? Sont-ils complètement séparés ou existe-t-il un moyen de recycler la plupart du code?

30
tbogatchev

Certaines des choses réutilisables sont styles:

var style = {
     box: {height: 30, width: 30, padding: 10, ect...}
}

Logic tel que state:

constructor(props){
 super(props);

 this.state= {text: "hi"};
}

l'état peut être partagé entre navite et dom comme si

<View>
<Text>this.state.text</Text>
</View>

dom ressemble à ceci

<div>this.state.text</div>

Vous pouvez même partager des fonctions, mais vous devez être prudent comme cela a été indiqué ci-dessus, tant que vous n'invoquez pas directement de dom ou refs dans votre logique.

onClick(){
 this.setState({text: "good bye"});
}
9
Train

Vous ne pouvez pas simplement utiliser tout votre code dans l'application native React. Tout d'abord, vous devez suivre l'architecture native React, puis développer votre interface utilisateur à l'aide de composants natifs React. https://facebook.github.io/react-native/docs/getting-started.html Vous obtiendrez l'essentiel de l'aide ici.

Il existe également une autre option, vous pouvez simplement créer un nouveau projet natif réactif et y utiliser une vue Web et y afficher l'intégralité de votre site Web. https://facebook.github.io/react-native/docs/webview.html

8
salvi shahzad

WebViews et React-native sont deux concepts complètement distincts. Soit vous voulez aller avec le premier (que vous pouvez réellement utiliser votre application sans trop de tracas), soit avec le second. Dans ce cas, vous pourriez probablement réutiliser une partie de la logique métier, mais la majeure partie du rendu devrait être réécrite.

React native est learn once, write anywhere, ne pas learn once, write once :)

5
george.cz

Ils sont généralement assez séparés, en partie parce que votre cible de rendu est différente (c'est-à-dire sans divs) et en partie à cause de choses comme window qui ne sont pas disponibles. Il est possible de réutiliser le code entre les applications Web et natives, mais uniquement si vous y faites très attention.

Depuis le réagir à la publication du blog de la version native :

Il convient de noter que nous ne recherchons pas "écrire une fois, exécuter n'importe où". Différentes plates-formes ont des looks, des sensations et des capacités différentes, et en tant que tel, nous devrions toujours développer des applications discrètes pour chaque plate-forme

5
Carl Vitullo

En fait, ce "Convert" est ce qui favoriserait React par rapport à AngulaJS ou Veu par exemple. Il serait parfaitement logique pour Facebook d'ajouter cette fonctionnalité depuis React et React Native est leur produit.

0
алекс кей