Cómo crear una aplicación para iOS usando React Native
aplicaciones nativas de iOS y Android. Utilice React para abstraer los componentes nativos de la interfaz de usuario del sistema operativo, representar elementos DOM y más en JavaScript.
React Native le permite crear experiencias de aplicaciones de clase mundial en plataformas nativas utilizando una experiencia de desarrollo consistente basada en JavaScript y React
React Native
Transforme la eficiencia del desarrollo La atención se centra en las plataformas que interesan a todos los desarrolladores. -React Native
utiliza React Native en varios de sus productos de aplicaciones y seguirá invirtiendo en React Native.
Las ventajas son claras: reducción de mano de obra, ahorro de tiempo, evitar desfases entre las versiones de iOS y Android y desarrollar nuevas funciones más rápido.
Ahora intentaremos usar React Native para crear una aplicación iOS.
Antes de comenzar, te recomiendo: puedes descargar el framework de código React Native desde Github
. También hay algunos proyectos de muestra: 2048 Game, Movies (una APP para ver películas), SampleApp, TicTacToe (un juego) y UIExplorer (que muestra todas las alternativas de React Native
Controles como ListView, TabBar, MapView y control deslizante). MapView, Slider)) son excelentes ejemplos para aprender a crear
UI con React Native, especialmente la APLICACIÓN UIExplorer que utiliza casi todos los controles de UI que necesita para crear en su aplicación.
Primero, instalemos las herramientas. React nativo usa Node.js para crear código JavaScript. Si ya tiene estas herramientas instaladas en su computadora, puede omitir estos pasos.
La forma recomendada de instalar nvm, watchman y flow es utilizar Homebrew.
En Mac, si usa Homebrew, la instalación se puede completar con una sola línea:
brew install node
A continuación, instale watchman
brew install watchman
Watchman es un monitor de archivos de Facebook para React Native que detecta cambios de código.
El siguiente paso es instalar npm
npm install -g react-native-cli
nmp es una herramienta de administración de nodos de terceros, equivalente a RubyGems y iOS en Ruby CocoaPods y Gradle/Maven en Java. Con esta herramienta, puede descargar y administrar fácilmente cualquier biblioteca dependiente necesaria para su proyecto.
Busque el archivo del proyecto que desea guardar en la terminal y ejecute la siguiente carpeta.
react-native init BookSearch
El proceso anterior de creación de un proyecto nativo utilizando herramientas CLI se puede crear y ejecutar tal cual.
Después de completar este proceso, abrirá BookSearch.xcodeproj en Xcode
en una ventana de terminal y ejecutará la aplicación como de costumbre. De esta manera el emulador iniciará su aplicación. También se abrirá una ventana de terminal. Cuando se inicie la aplicación local, el JavaScript de la aplicación se cargará desde la siguiente URL.
e}gt;
¡Bienvenido a React Native!
lt;/Textgt;
lt;Text style={styles.instructions}gt;
Para comenzar, edite index.ios.js
p>lt;/Textgt;
lt;Text style={styles.instructions}gt;
Presiona Cmd R para recargar, {'\n'}
Presiona Cmd Control Z para recargar el menú de desarrollo
Presiona Cmd Control Z para recargar el menú de desarrollo
Presiona Cmd Control Z para recargar el menú de desarrollo
lt;
}); >
La clase creada anteriormente tiene solo una función render(). Todo lo que esté definido en la función de renderizado se mostrará en la pantalla. Si ha trabajado con XML (o incluso HTML) antes, entonces JSX
le resultará novedoso y familiar. Tiene la misma funcionalidad de ecualización para activar y desactivar marcadores y utiliza propiedades para establecer marcadores de valor. No es necesario utilizar la respuesta nativa de JSX; puede utilizar JavaScript puro, pero JSX recomienda utilizar su estructura de árbol de definición simple. Si tiene mucho código de interfaz de usuario, utilizar una estructura de árbol JSX grande será más fácil de leer y comprender.
var estilos = StyleSheet.create({
contenedor: {
flex: 1,
justifyContent: center',
p>
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
bienvenido: {
fontSize: 20,
textAlign: 'center',
margen: 10,
},
p> instrucciones: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Los estilos anteriores se pueden aplicar al contenido de la vista. Si ha realizado desarrollo web o ha utilizado CSS (hojas de estilo en cascada), esto le resultará familiar; React Native utiliza CSS para diseñar la interfaz de usuario de su aplicación. Si observa el código JSX, encontrará que se utilizan diferentes estilos. en diferentes lugares. Por ejemplo
style={style.container} establece un estilo para definir la vista exterior del contenedor para contener otros componentes de la interfaz de usuario.
Los estilos anteriores se pueden aplicar al contenido de la vista.
Si ha realizado desarrollo web o ha utilizado CSS (hojas de estilo en cascada), esto le resultará familiar; React Native utiliza CSS para diseñar la interfaz de usuario de su aplicación. Si observa el código JSX, verá que se utilizan diferentes estilos. diferentes lugares. Por ejemplo
style={style.container} establece un estilo para definir la vista exterior del contenedor que contiene otros componentes de la interfaz de usuario.