Jaki jest najszybszy sposób przekonwertowania aplikacji React na React Native?

Question

To może być naiwne pytanie, ale nie mogłem znaleźć zbyt wielu informacji na ten temat. Mam w pełni funkcjonalną aplikację reag-redux i chciałbym teraz przenieść ją na system iOS i Android. Nie potrzebuję korzystać z żadnych natywnych funkcji, takich jak GPS czy kamera itp. Teoretycznie po prostu chcę zrobić coś w rodzaju przeglądarki, która uruchamia istniejącą aplikację React, a następnie dostosowywać ją tak, aby wyglądała lepiej. Pierwszą próbą było użycie mojego bieżącego pliku jsbundle i wstawienie go do AppDelegate jako lokalizacji jsCodeLocation. Spodziewano się, że nie zostaną zdefiniowane wszystkie rodzaje błędów, takich jak "okno".

Domyślam się, że moje pytanie brzmi: w jaki sposób ludzie zazwyczaj zarządzają swoimi bazami macierzystymi i obcymi? Czy są one całkowicie oddzielne, czy istnieje sposób na recykling większości kodu?

Answer 1

Zazwyczaj są one dość osobne, częściowo dlatego, że cel renderowania jest inny (tzn. Nie ma div s), a częściowo z powodu braku takich elementów, jak window. Możliwe jest ponowne wykorzystanie kodu między aplikacjami internetowymi i natywnymi, ale tylko pod warunkiem, że jesteś bardzo ostrożny.

Z react native release blog post:

Warto zauważyć, że nie jesteśmy w pogoni „napisz raz, uruchom wszędzie”. Różne platformy mają różne spojrzenia, czuje, i możliwości, i jako takie powinny być nadal rozwój aplikacji dyskretnych dla każdej platformy

Answer 2

Niektóre rzeczy wielokrotnego użytku są styles:

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

Logic takie jak stan:

constructor(props){ 
super(props); 

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

państwo może być dzielone między navite i DOM jak tak

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

dom wygląda to

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

można nawet funkcje akcji, ale trzeba należy zachować ostrożność, jak to zostało powiedziane powyżej, o ile nie powołujesz się bezpośrednio na żadną domenę lub znaki w twojej logice.

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

Answer 3

WebViews i React-native to dwa zupełnie odrębne pojęcia. Albo chcesz iść z tym pierwszym (niż możesz faktycznie użyć aplikacji bez większego wysiłku), albo z tym ostatnim. W takim przypadku prawdopodobnie będziesz mógł ponownie wykorzystać część logiki biznesowej, jednak większość renderowania będzie musiała zostać przepisana.

React rodzimy jest learn once, write anywhere nie learn once, write once :)

Answer 4

Przede wszystkim, trzeba użyć reagować rodzimych komponentów zamiast tagów HTML. Tu jest link do przycisku, można znaleźć wszystkie inne składniki tu tylko https://facebook.github.io/react-native/docs/button.html#content Nie zapomnij zaimportować te składniki z reagują rodzimymi w projekcie

Istnieje też inna możliwość, można po prostu stworzyć nową reagować -natywny projekt i używaj w nim widoku internetowego i wyświetlaj tam całą swoją witrynę. https://facebook.github.io/react-native/docs/webview.html