React native：有没有办法从sqlite表中查看“ Zone_Name”列表到flatList中？

如何解决React native：有没有办法从sqlite表中查看“ Zone_Name”列表到flatList中？

有一种方法可以在“ flatList ”中查看“ Zone_Name”的列表，这让我也可以从平面列表中按我想要的数量来选择“ Zone_Name”的结果。

仅当我按“区域列表”的“ TouchableOpacity”时，才会显示此平面列表。 怎么做呢？

表为：“ tblUserConnectResponseData”

该字段为：“成功区域”

该字段的内容为：

[{"Zone_ID":66,"Zone_Name":"BOB"},{"Zone_ID":20,"Zone_Name":"FROG"}]

在这里，我要在列表中添加评论列表。

import React,{ Component } from 'react';
import { View,Text,StyleSheet,TouchableOpacity,Image } from 'react-native';
import MyDatePicker from '../components/MyDatePicker';

export default class Screen2 extends Component {
  constructor(props) {
    super(props);

    this.state = { checked: 'first',activeIndex: 0,dataSource: data };
  }

  componentDidMount() {
    //fetch here data and when have response so save like this ===>>    this.setState({dataSource:response})
  }

  selectItem = (data) => {
    data.item.isSelect = !data.item.isSelect;
    data.item.selectedClass = data.item.isSelect
      ? styles.selected
      : styles.list;

    const index = this.state.dataSource.findIndex(
      (item) => data.item.id === item.id
    );
    this.state.dataSource[index] = data.item;
    this.setState({
      dataSource: this.state.dataSource,});
  };

  renderItem = (data) => (
    <TouchableOpacity
      style={[styles.list,data.item.selectedClass]}
      onPress={() => this.selectItem(data)}
    >
      <Text style={styles.lightText}>
        {data.item.name.charAt(0).toUpperCase() + data.item.name.slice(1)}
      </Text>
    </TouchableOpacity>
  );
  render() {
    const { checked } = this.state;
    return (
      <>
        <View style={styles.mekorotImage}>
          <Image
            style={{
              resizeMode: 'contain',height: 100,width: 200,}}
            source={require('../assets/mekorot_1.png')}
          />
        </View>
        <View style={styles.screen}>
          <View style={styles.touch}>
            <View style={{ marginBottom: 35 }}>
              <View
                style={{
                  flexDirection: 'row',}}
              >
                <TouchableOpacity
                  style={styles.circleButton2}
                  onPress={() => {
                    this.setState({ activeIndex: 0 });
                  }}
                  activeOpacity={1}
                  style={
                    this.state.activeIndex === 0
                      ? styles.circleButton1
                      : styles.circleButton2
                  }
                >
                  <Image
                    source={require('../assets/icondigum1.png')}
                    style={{ height: 40,width: 40 }}
                  />
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={() => {
                    this.setState({ activeIndex: 0 });
                  }}
                  activeOpacity={1}
                  style={
                    this.state.activeIndex === 0
                      ? styles.button
                      : styles.button2
                  }
                >
                  <Text style={styles.textButton}>List of places by region</Text>
                </TouchableOpacity>
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',}}
            >
              <TouchableOpacity
                style={styles.circleButton2}
                onPress={() => {
                  this.setState({ activeIndex: 1 });
                }}
                activeOpacity={1}
                style={
                  this.state.activeIndex === 0
                    ? styles.circleButton2
                    : styles.circleButton1
                }
              >
                <Image
                  source={require('../assets/icondigum2.png')}
                  style={{ height: 45,width: 45 }}
                />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => {
                  this.setState({ activeIndex: 1 });
                }}
                activeOpacity={1}
                style={
                  this.state.activeIndex === 1 ? styles.button : styles.button2
                }
              >
                <Text style={styles.textButton}>List of places according to sampling</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>

        <View>
          <MyDatePicker />
        </View>

        <View style={styles.AreasPrototypesContainer}>
          <FlatList
            data={this.state.dataSource}
            // ItemSeparatorComponent={this.FlatListItemSeparator}
            renderItem={(item) => this.renderItem(item)}
            keyExtractor={(item) => item.id.toString()}
            // extraData={this.state}
          />
          {/* <Collaps1 /> */}
        </View>
        <View style={styles.AreasPrototypesBottomView}>
          <TouchableOpacity
            onPress={() => {
              this.props.navigation.navigate('Sampling points');
            }}
          >
            <Image
              source={require('../assets/pick_choice.png')}
              style={{ height: 50,width: 50 }}
            />
          </TouchableOpacity>
        </View>
      </>
    );
  }
}