Tengo una vista con pocos elementos de formulario y un botón (TouchableHighlight). Al hacer clic en el botón, se debe mostrar un indicador de actividad como una superposición a la vista existente. El indicador de actividad debe estar centrado dentro de la página y la vista existente debe estar ligeramente borrosa para indicar superposición. Probé diferentes opciones pero no pude hacerlo funcionar.
render() { const { username, password } = this.state; return ( <View style={styles.container}> <View style={styles.group}> <Text style={styles.text}>Username:</Text> <TextInput style={styles.input} onChangeText={this.handleUserNameChange.bind(this)} value={username} underlineColorAndroid="transparent" /> </View> <View style={styles.group}> <Text style={styles.text}>Password:</Text> <TextInput style={styles.input} secureTextEntry={true} onChangeText={this.handlePasswordChange.bind(this)} value={password} underlineColorAndroid="transparent" /> </View> <TouchableHighlight style={styles.button} onPress={this.handleLogin.bind(this)}> <Text style={styles.buttonText}>Logon</Text> </TouchableHighlight> </View> ); }Estilos existentes:
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#F5FCFF', marginTop: 60 }, group: { alignItems: 'flex-start', padding: 10 }, input: { width: 150, padding: 2, paddingLeft: 5, borderColor: 'gray', borderWidth: 1 }, text: { padding: 0 }, button: { width: 150, backgroundColor: '#2299F2', padding: 15, marginTop: 20, borderRadius: 5 }, buttonText: { textAlign: 'center', color: '#fff', fontSize: 24 }, });Necesito un indicador de actividad en la vista anterior, superponer la vista y centrar el indicador de actividad.
Para que esto funcione, debe colocarlo en una posición absolute y renderizarlo después de los elementos que deberían estar debajo de la superposición:
loading: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' } Luego, simplemente compóngalo en el método de render condicionalmente, en función de un estado de carga. Voy a asumir que this.handleLogin establece algún tipo de estado de carga.
Asegúrate de que se represente en último lugar para que tenga prioridad.
... {this.state.loading && <View style={styles.loading}> <ActivityIndicator size='large' /> </View> }Aquí hay un ejemplo completo usando la aplicación nativa Create React.
import React from 'react'; import {StyleSheet, ActivityIndicator, View} from "react-native"; export default class Example extends React.Component { constructor(props) { super(props); this.state = {} render() { return ( <View style={{flex: 1}} > //Add other content here {this.state.loading && <View style={styles.loading}> <ActivityIndicator/> </View> } </View> ); } } showLoading() { this.setState({loading: true}) } hideLoading() { this.setState({loading: false}) } const styles = StyleSheet.create({ loading: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, opacity: 0.5, backgroundColor: 'black', justifyContent: 'center', alignItems: 'center' } })Puede usar StyleSheet.absoluteFill para acortar el código. Agrega esto a tu render:
<View style={styles.container}> //... other code here {this.state.loading && <View style={{ ...StyleSheet.absoluteFill, justifyContent: 'center', alignItems: 'center', }}> <ActivityIndicator /> </View>} </View>Mejora:
También puede crear un componente de carga:
Cargando.js
import React from 'react'; import {View, ActivityIndicator, StyleSheet} from 'react-native'; export const Loading = ({theme = 'white', size = 'large'}) => { const color = theme === 'white' ? '#00bdcd' : '#fff'; return ( <View style={{ ...StyleSheet.absoluteFill, justifyContent: 'center', alignItems: 'center', }}> <ActivityIndicator size={size} color={color} /> </View> ); };Luego úsalo donde quieras
<View style={styles.container}> //... other code here // remember to import Loading component {this.state.loading && <Loading />} </View>