React Native: Como conectar y listar datos desde API REST

Variables de state

Variables

constructor(props)
  {
     super(props);
     this.state = {
       isLoading: true,
       dataMovie:[]
     }
  }

importar Componentes de React Native

ActivityIndicator, FlatList

componentDidMount

El método de componentDidMount se ejecuta inmediatamente después de que un componente se monte.

return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {

      this.setState({
        isLoading: false,
        dataMovie: responseJson,
      });

    })
    .catch((error) =>{
      console.error(error);
    });

Render

ActivityIndicator

<ActivityIndicator size="large" color="#0000ff" />

Flatlist

<FlatList
              data={this.state.dataMovie.movies}
              extraData={this.state}
              keyExtractor={this._keyExtractor}
              renderItem={this._renderItem}
            />
  _renderItem = ({item}) => (
   <Text > {item.title}, {item.releaseYear}</Text>
 );

Con condición de isLoading

{this.state.isLoading?
          <ActivityIndicator size="large" color="#0000ff" />
          :
          <View>
            <Text style={{color:'blue',fontSize:28}}> {this.state.dataMovie.title}</Text>
            <Text > {this.state.dataMovie.description}</Text>

            <FlatList
              data={this.state.dataMovie.movies}
              extraData={this.state}
              keyExtractor={this._keyExtractor}
              renderItem={this._renderItem}
            />
          </View>
        }

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *