0

Galera, estou vendo um pouco de desenvolvimento mobile (Android), e vi que o design é feito usando XML, e pelo que eu vi, parece não ter nenhuma tag de loop, para repeti estruturas semelhantes, e gerar algum conteúdo de forma dinâmica.

Como é que faria para fazer algo assim?

Um exemplo feito em React Navive:

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

A <FlatList> repete o array que é passado no atributo "data"

7
  • Coloque um exemplo concreto do que pretende fazer.
    – ramaral
    Commented 6/09/2018 às 19:26
  • @ramaral, ainda não quero fazer nada, é só uma duvida. No Ionic tem o *ngFor do Angular, no React Native tem a FlatList, eu queria saber como faz algo semelhante de forma nativa no Android Studio. Commented 6/09/2018 às 19:30
  • 1
    No Android "nativo" tem de usar Java ou Kotlin para manipular o conteúdo das views.
    – ramaral
    Commented 6/09/2018 às 19:45
  • 1
    No Android você faz isso através do componente RecyclerView em conjunto com um Adapter, pesquise sobre esses termos Commented 6/09/2018 às 20:48
  • 1
    "Então tem como desenhar a interface usando somente java?" - Tem, mas normalmente essa não é a melhor abordagem. Se quer programar "nativamente" tem de "esquecer" o que sabe de React Native.
    – ramaral
    Commented 6/09/2018 às 21:01

1 Resposta 1

1

Fazendo uma pequena modificação no seu componente, os dados da FlatList, podem ficar dinâmicos.

Setando uma variável no state do componente, é possível referenciar ele no método render(), assim a lista pode mudar de acordo com o conteúdo da variável data_list. Inclusive se ela for alterada, o FlatList será atualizado.

import React, { Component } from 'react';
import { AppRegistry, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  constructor(props) {
    this.state = {
      data_list: [
        {key: 'Devin'}, {key: 'Jackson'},
        {key: 'James'}, {key: 'Joel'},
        {key: 'John'}, {key: 'Jillian'},
        {key: 'Jimmy'}, {key: 'Julie'},
      ]
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={ this.state.data_list }
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .