How does it work to dynamically put content making an Android application natively?

Question

How does it work to dynamically put content making an Android application natively?

Navigation

#1 by (1 votes)

0

I'm seeing a bit of mobile development (Android), and I saw that the design is done using XML, and from what I've seen, it seems to have no loop tag, to repeat similar structures, and generate some content from dynamic form.

How would you do something like this?

An example made in 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);

<FlatList> repeats the array that is passed in the "data"

java android xml mobile android-studio

asked by anonymous 06.09.2018 / 21:11

1 answer

Problem with Get in jquery Change background image of an Adapter Recycler View after click

score 1 · Answer 1

By making a small modification to your component, data from the FlatList , can become dynamic.

By setting a variable in the state of the component, you can reference it in the render () method, so the list can change according to the contents of the data_list . Even if it is changed, the FlatList will be updated.

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);