React Native-динамически добавлять элемент в DOM при нажатии кнопки

в react native я пытаюсь динамически добавить элемент в DOM нажатием кнопки.

это то, что у меня есть до сих пор в методе Render ():

<TouchableHighlight  
    style={styles.button} 
    onPress={this.addAnotherRow}>

        <Text>Add new row</Text>

</TouchableHighlight>

Я не уверен, что вернуть из функции onpress, чтобы добавить еще один элемент DOM:

addAnotherRow() {
    return <Text>New Row</Text>
}

любая помощь, пожалуйста?

10
react-native

1 ответов

хороший способ сделать это-настроить массив, а затем отобразить через массив в представлении. Чтобы добавить элемент, нажмите элемент в массив и сбросьте состояние массива:

getInitialState(){
  return { rows: [] }
},

_addRow(){
  this.state.rows.push(index++)
  this.setState({ rows: this.state.rows })
}

let rows = this.state.rows.map((r, i) => {
    return <View key={ i } style={[styles.row, CheckIndex(i)]}>
              <Text >Row { r }, Index { i }</Text>
           </View>
})

и используйте переменную следующим образом:

<View>
  { rows }
</View>

Я создал рабочий пример этого здесь, а также вставил код ниже.

https://rnplay.org/apps/-ENWEw

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

let index = 0 

var SampleApp = React.createClass({

  getInitialState(){
        return { rows: [] }
    },

  _addRow(){
    this.state.rows.push(index++)
    this.setState({ rows: this.state.rows })
  },

  render() {

    let CheckIndex = i => {
        if((i % 2) == 0) {
        return styles.gray
      }
    }

    let rows = this.state.rows.map((r, i) => {
        return <View key={ i } style={[styles.row, CheckIndex(i)]}>
                    <Text >Row { r }, Index { i }</Text>
                 </View>
    })

    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={ this._addRow } style={styles.button}>
            <Text>Add new row</Text>
                </TouchableHighlight>
        { rows }
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60,
  }, 
  gray: {
    backgroundColor: '#efefef'
  },
  row: {
    height:40,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomColor: '#ededed',
    borderBottomWidth: 1
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    height:55,
    backgroundColor: '#ededed',
    marginBottom:10
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);
7