Как правильно адаптировать обычный JS-код под требования React Native? Что следует учитывать?

Question

[kopytse]

Имеется JS-код, работающий на открытой в WebView странице и оперирующий данными о местоположении, скорости и т.д. По некоторым причинам требуется перевести этот код непосредственно в сам React Native. Насколько я вижу, синтаксис у React Native несколько отличается. Что следует учитывать при таком переходе?

Comments

[Роман Александрович]

Ну как минимум вам нужно поиграться с компонентами реакт найтива потому что они простое поле input в реакт найтиве называется по другому. Еще вап нужно будет разобраться с https://reactnavigation.org/ для перехода между экранами. Как одной из проблем может быть наличие мака и iphone потому что без мак ос и телефоны вы не сможете опубликовать ваще приложение. Лучше иметь сразу 2 телефона с андройд и ios потому как присутствует эмулятор и айфона и андройда но при тестировании на настоящих телефонах вылазят куча интересных багов.
Ну еще нужно помнить что apple попросит за аккаунт разработчика 100уе, google по меньше.

[A-One]

Пример кода можно?

[Димка Реактнативный]

Вам нужно начать с основ. Для этого запустил видео курс для начинающих на канале YouTube

Answer 1

[KnightForce]

Как-то расплывчато.

Что бы делал я.
Задача максимально сохранить код в том виде в каком он написан под Web.
1) Если нужно будет переносить UI, то эту часть придется переписывать.
2) Геолокация. Представим что обращение к ней сильно различается по синтаксису и данные возвращаются в ином виде.
Тогда подключаем библиотеку в отдельный файл и пишем класс обёртку, которая сделает нужные запросы и вернёт ответ в нужном виде для кода с веб.

Гипотетический пример.
На Web синтаксис:

GEO.getLocation(function(result){

});

А на React Native:

let geo = await System.getGeo();
let location = await geo.getLocation();

Как можно адаптировать:

class Geo {
    static async getLocation(callback) {
        try {
            let geo = await System.getGeo();
            callback(await geo.getLocation());
        } catch(e) {}
       
        geo = null;

    }

}

Этим примером я хотел показать, что разность реализации можно скрыть классом обёрткой.