Desarrollo de Android Creación de proyectos y construcción de entornos React Native

  Primero echemos un vistazo al efecto de RNDemo. Tengo que quejarme al respecto aquí. Para ser honesto, RN es, después de todo, un rendimiento js y no es fluido de forma nativa. Mire el efecto y sabrá:

  Primero, necesita instalar NodeJS, porque React Native (referido como RN, lo llamaré RN más adelante) en sí mismo se basa en el lenguaje Javascript y el lenguaje React. Más adelante encontrará que todos los archivos tienen el sufijo .js. Entonces, NodeJS es necesario para compilar los archivos, y como presentaremos más adelante, también necesitamos usar el comando Node para inicializar el proyecto RN y descargar todos los paquetes node_modules requeridos. Está bien, no digamos tonterías. Comencemos.

  Si ha instalado NodeJS, puede usar el comando npm; de lo contrario, no podrá encontrar el comando. Primero presentaré cómo usar RN en Android Studio.

  1. Utilice Android Studio para crear un proyecto vacío como "RNDemo", pero al crear un proyecto de Android, debe prestar atención a: El SDK mínimo actualmente admite API16 como mínimo, por lo que es mejor crearlo con mini API16 o superior.

  2. Una vez creado el proyecto de demostración de Android, haga clic en Terminal (tenga en cuenta que debe ejecutarse en el directorio raíz)

    A continuación, ejecute el siguiente código: 

npm init

npm install --save react react-native

   Nota:

   init genera principalmente archivos package.json basados ​​en recordatorios

   instalar --save reaccionar react-native 安装 React 和 React Native

   Luego abra https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig en el navegador

   Descargue el archivo y colóquelo en el directorio raíz:

 

    3. Agregar y modificar el contenido de la configuración

 

1. Modifique el archivo package.json

 

 

2. Cree un archivo js de entrada

3. Agregue la configuración del archivo de compilación

build.gradle (Módulo: aplicación) 添加 ：

defaultConfig {
       ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

android {
    ...
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:+'
    }
}

compile "com.facebook.react:react-native:+"

build.gradle (Proyecto: Aplicación) 添加 ：

 

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

 

Configuración del archivo de manifiesto:

5. La actividad hereda ReactActivity, la aplicación implementa ReactApplication

Agregue MyApplication al nombre del manifiesto.

Todo está listo, inicie run'App ', y luego ingrese el comando react-native start en Terminal. Nota (si es una máquina real, debe ejecutar adb reverse antes de este tcp: 8081 tcp: 8081 para asegurarse de que el puerto 8081 esté conectado a la máquina real No ocupe el número de puerto)

Si necesita empaquetar la aplicación, primero debe crear un nuevo directorio de activos en android / app / src / main, y luego ingresar en la línea de comando de Terminal:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

            Luego, encontrará que se generarán dos archivos de paquete en el directorio de activos que creó, que se pueden empaquetar:

 

4. Finalmente, cómo programar RN

En primer lugar, debe comprender los conceptos básicos del lenguaje react y el lenguaje JavaScript, y luego es mejor instalar Webstorm. También se puede usar otro software. Sin embargo, Webstorm es actualmente el más popular y el mejor para usar. Todas las operaciones básicas son similares a las herramientas de desarrollo de AndroidStudio. Es más conveniente usar Webstorm. Y Webstorm puede crear directamente proyectos React Native. Los proyectos de Android e IOS se crean automáticamente y se pueden usar directamente:

Código fuente