React Native es un marco desarrollado por Facebook para crear aplicaciones de estilo nativo para iOS y Android bajo un lenguaje común, JavaScript. En este artículo, vamos a crear un cuadro de diálogo con Entrada de texto. Para lograr esto, usaremos el componente Modal incorporado de React Native que usaremos como Dialog.
Hay dos formas de crear una aplicación React Native, puede usar cualquiera de ellas, pero vamos a usar expo-CLI para crear nuestra aplicación. Aquí puede encontrar los dos métodos mediante los cuales puede crear una aplicación RN. Hay algunos requisitos previos para crear una aplicación RN. Debería haber instalado las siguientes herramientas.
- Node 12 LTS o superior
- Expo-CLI
Para instalar expo-CLI: Ejecute el siguiente comando.
npm install -g expo-cli or yarn global add expo-cli
Para crear la aplicación: TestApp es el nombre de la aplicación, puede usar cualquier otro nombre
expo init TestApp
Para ejecutar la aplicación: vaya a la carpeta de la aplicación y ejecute el comando.
cd TestApp expo start
App.js: después de ejecutar todos esos comandos, debe tener un directorio llamado TestApp, que contendrá archivos de su aplicación React Native. Vamos a editar nuestro archivo App.js para crear un diálogo.
Javascript
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { Button, SafeAreaView, StyleSheet, Modal,
View, TextInput, Dimensions } from "react-native";
const { width } = Dimensions.get("window");
export default function App() {
// This is to manage Modal State
const [isModalVisible, setModalVisible] = useState(false);
// This is to manage TextInput State
const [inputValue, setInputValue] = useState("");
// Create toggleModalVisibility function that will
// Open and close modal upon button clicks.
const toggleModalVisibility = () => {
setModalVisible(!isModalVisible);
};
return (
<SafeAreaView style={styles.screen}>
<StatusBar style="auto" />
{/** We are going to create a Modal with Text Input. */}
<Button title="Show Modal" onPress={toggleModalVisibility} />
{/** This is our modal component containing textinput and a button */}
<Modal animationType="slide"
transparent visible={isModalVisible}
presentationStyle="overFullScreen"
onDismiss={toggleModalVisibility}>
<View style={styles.viewWrapper}>
<View style={styles.modalView}>
<TextInput placeholder="Enter something..."
value={inputValue} style={styles.textInput}
onChangeText={(value) => setInputValue(value)} />
{/** This button is responsible to close the modal */}
<Button title="Close" onPress={toggleModalVisibility} />
</View>
</View>
</Modal>
</SafeAreaView>
);
}
// These are user defined styles
const styles = StyleSheet.create({
screen: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#fff",
},
viewWrapper: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "rgba(0, 0, 0, 0.2)",
},
modalView: {
alignItems: "center",
justifyContent: "center",
position: "absolute",
top: "50%",
left: "50%",
elevation: 5,
transform: [{ translateX: -(width * 0.4) },
{ translateY: -90 }],
height: 180,
width: width * 0.8,
backgroundColor: "#fff",
borderRadius: 7,
},
textInput: {
width: "80%",
borderRadius: 5,
paddingVertical: 8,
paddingHorizontal: 16,
borderColor: "rgba(0, 0, 0, 0.2)",
borderWidth: 1,
marginBottom: 8,
},
});
Producción:
Publicación traducida automáticamente
Artículo escrito por sanjeev2552 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA