Cómo compilar el programa de muestra ReactNativeEjemplos

Puedes ver el uso de algunos componentes básicos a través del programa de muestra, que es muy útil para aprender ReactNative.

Para compilar el programa de muestra, debe importar el proyecto completo a androidStudio. Cuando androidStudio importe el proyecto, seleccione el directorio react-native/ReactAndroid.

Dado que el proyecto depende de ndk, si desea compilar ejemplos, debe instalar y configurar el directorio ndk. Después de descargar ndk, es un programa autoextraíble que liberará el directorio ndk.

Luego, debe configurar las variables de entorno o crear un nuevo archivo local.properties en el directorio raíz nativo de reacción. El contenido del archivo es el siguiente:

sdk.dir=c: \tu directorio sdk

p>

ndk.dir=c:\tu directorio ndk

Puedes compilarlo después de configurarlo. El proceso de importación y compilación es bastante. tortuoso, por favor continúa leyendo a continuación.

Al compilar el proyecto AwesomeProject, no se usó ndk. De hecho, el ndk aquí no se usa de forma predeterminada. Es solo que hay ndk en la configuración de gradle, por lo que ndk debe configurarse para importar. proyecto.

ndk solo se usa al compilar la biblioteca principal. La biblioteca principal se encuentra en reaccionar-nativo/ReactAndroid y existe en formato lib al importar todo el proyecto. Consulte UIExplorer en el directorio

Ejemplos y encontrará que la biblioteca principal se importa en línea en build.gradle. La importación mediante código fuente está comentada.

dependencias {

compilar fileTree(dir: 'libs', incluir: ['*.jar'])

compilar 'com.android.support: appcompat-v7:23.0.1'

// Depende de React Nativecompile prediseñado 'com.facebook.react:react-native:0.11.+'

// Depende de Fuente de React Native.

// Esto es útil para probar sus cambios cuando trabaja en React Native.

// compilar proyecto(':ReactAndroid')

}

Se puede ver que compilar UIExplorer no requiere ndk. Si no desea configurar ndk, hay dos formas

1. Copie build.gradle y la configuración. gradle en el proyecto AwesomeProject Vaya al directorio de Android de UIExplorer y seleccione UIExplorer/android al importar el proyecto. De esta manera, androidStudio importará un solo proyecto; de lo contrario, se importará todo el proyecto.

2. Utilice androidStudio para crear un nuevo proyecto con el mismo nombre y luego copie los archivos en el directorio UIExplorer al nuevo proyecto.

Después de la compilación, inicie el servidor y vaya al directorio nativo de reacción para ejecutar:

npm install

node packager\packager.js

Si se produce un error en Windows, debe modificar el código de acuerdo con el mensaje de error blogs.com/zhaojietec/p/4853273.html

Sin embargo, cabe señalar que hasta ahora, UIExplorer Tiene un error en Android, pero no en IOS. Problema, puedes encontrar la solución a través de Google. /facebook/react-native/issues/2855

La razón es que el código js y el código nativo de Android no están sincronizados. A través de build.gradle, puede ver que la biblioteca principal reactNative a la que se hace referencia en Android es. 11, mientras que el código js La versión se ha actualizado a 12.

Hay dos soluciones. Una es usar herramientas git (como smartGit) para restaurar el código js a la versión anterior. La otra es volver a compilar la biblioteca central

de reactNative. la biblioteca principal requiere ndk. No hay ningún problema en Mac, pero se producirán errores al compilar en Windows. Compile la biblioteca central reactNative y modifique las dependencias

comentadas en UIExplorer. La velocidad de compilación es lenta y las bibliotecas dependientes de terceros deben descargarse en línea.

dependencias {

compilar fileTree(dir: 'libs', incluir: ['*.jar'])

compilar 'com.android.support: appcompat-v7:23.0.1'

// Depende de React Native prediseñado//compile 'com.facebook.react:react-native:0.11.+'

/ / Depende de la fuente de React Native.

// Esto es útil para probar sus cambios cuando trabaja en React Native.

compilar proyecto(':ReactAndroid')

}

Dado que no se puede compilar en Windows, el archivo aar compilado se proporciona aquí y simplemente modifique las dependencias en UIExplorer build.gradle. En cuanto a cómo introducir archivos aar, puede buscarlo usted mismo. Por supuesto, también puedes usar este aar en Mac, lo que puede ahorrarte muchos problemas.