在React Native中保存平面列表项目的项目

Question

我是新来的本地人。我想在按flatlist项目时保存flatlist的项目并显示它。 我首先实现了“自动完成”视图，从中可以选择国家/地区，然后在flatlist中显示数据。

render() {
const { query } = this.state;
const autotime = this.findtimezone(query);
const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();
return (
  <View style={styles.container}>
  <Autocomplete
      autoCapitalize="none"
      autoCorrect={false}
      containerStyle={styles.autocompleteContainer}
      data={autotime.length === 1 && comp(query, autotime[0].name) ? [] : autotime}
      defaultValue={this.state.timeZone}
      onChangeText={text => this.setState({ query: text })}
      placeholder="Enter Location"
      renderItem={({ name, release_date }) => (
        <TouchableOpacity onPress={() => this.setState({ query: name,timezoneArray:autotime[0].timezones })}>
          <Text style={styles.itemText}>
            {name}
          </Text>
        </TouchableOpacity>
      )}
    />
    <View style={styles.descriptionContainer}>
    {autotime.length > 0 ? (
      <FlatList
      keyExtractor={(item, index) => index}
      style={{flex:1}}
      data={this.state.timezoneArray}
      renderItem={({item,index}) => <Text style={{padding:10,borderBottomWidth:1,borderBottomColor:"#000000"}}>{item}</Text>}


      />

      ) : (
        <Text style={styles.infoText}>Enter Location</Text>
      )}
    </View>    

  </View>
 );

我想在单击flatlist项目时通过异步方式保存该项目，并在flatlist中显示它。

Answer 1

您可以创建一个由Flatlist呈现的组件，并在该组件中添加文本和按钮。

import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';

export default class TimeZoneItem extends Component {

  static propTypes = {
    text: PropTypes.string.isRequired,
    onPress: PropTypes.func.isRequired,
  };

  static defaultProps = {
    text: '',
    onPress: () => {},
  };

  render() {
    const { text, onPress } = this.props;

    return (
      <View style={styles.timeZoneItem}>
        <Text style={styles.textStyle}>{text}</Text>
        <TouchableOpacity onPress={onPress} style={styles.button}>
          <Text style={styles.save}>Save</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    borderColor: 'white',
    borderWidth: 1,
    borderRadius: 12,
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
    overflow: 'hidden',
    padding: 12,
    textAlign: 'center',
  },
  timeZoneItem: {
    flex: 1,
    flexDirection: 'row',
    borderBottomColor: 'black',
    borderBottomWidth: 1,
  },
  textStyle: {
    flex: 3,
  },
  save: {
    color: 'white',
  },
});

像这样在您的单位列表中使用它

{ autotime.length > 0 ? (
    <FlatList
      keyExtractor={(item, index) => index}
      style={{ flex: 1 }}
      data={this.state.timezoneArray}
      renderItem={({ item, index }) => (
        <TimeZoneItem text={item} />
      )}
    />
  ) : (
    <Text style={styles.infoText}>Enter Location</Text>
  );
}

演示

Working Demo