Настройка React-native

Реагирование, машинописный текст, какаоподы, машинописный текст, навигация и нативная база

Шаг 0. убедитесь, что установлены все глобальные переменные. Это пряжа, реакт натив и т.д. для кокоаподов

> sudo gem install cocoapods, 
> npm install -g react-native-cli

Шаг 1. запустите новый проект React Native.

> react-native init project_name

Шаг 2. преобразовать в машинописный текст.

> yarn add --dev typescript
> yarn add --dev react-native-typescript-transformer
> yarn tsc --init --pretty --jsx react
> touch rn-cli.config.js
> mv App.js App.tsx

Третья команда ‘yarn tsc’ создает файл tsconfig.json. Добавьте в этот файл нужный параметр конфигурации. Мои текущие предпочтительные варианты:

{
    "compilerOptions": {
        "baseUrl": ".", 
        "outDir": "build/dist",
        "module": "esnext",
        "target": "es5",
        "lib": ["es6", "dom"],
        "sourceMap": true, 
        "allowJs": true,
        "jsx": "react",
        "moduleResolution": "node",
        "rootDir": "./",
        "forceConsistentCasingInFileNames": true,
        "importHelpers": true,
        "strict": true,
        "strictNullChecks": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true
    }
}

В файле rn-cli.config.js добавьте этот код:

module.exports = {
    getTransformModulePath() {
        return require.resolve('react-native-typescript-transformer')
    },
    getSourceExts() {
        return ['ts', 'tsx']
    }
}

Шаг 3. добавить поддержку декоратора.

yarn –dev add @babel/plugin-proposal-decorators

Файл .babelrc должен выглядеть так:

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true}]]
}

Шаг 4. добавить какао-стручки.

> cd ios/
> pod init 
> pod install

Я удалил все содержимое файлов, за исключением:

target 'frontend_lunch' do
end

Это, вероятно, потребуется отредактировать позже в проекте, но сейчас все в порядке.

Шаг 5. закройте Xcode и откройте файл .xcworkspace.

Шаг 6. установить навигацию.

> yarn add react-navigation
> yarn add react-native-guesture-handler 
> react-native link

Не забудьте добавить части для Android в файл MainActivity.java:

Шаг 7. установить нативную базу.

> yarn add native-base 
> react-native link 

В целом этот код будет генерировать базу того, что необходимо для проекта React Native. У нас есть кокаоподы для установки нативных зависимостей и выполнения всех линковок для ios,

Ссылки