SecionList를 사용하여 섹션을 확장하거나 축소하는 방법

SecionList를 사용하여 섹션을 확장하거나 축소하는 방법

나는 api https://obscure-reaches-65656.herokuapp.com/api/getCloseTime?city=Miaoli&sTime=21&eTime=24을 나의 것으로 부른다.react-redux행동과 사용SectionList자료를 보여드리기 위해서.

공식 자습서에서는SectionList모든 섹션이 표시되며, 섹션이 확장되거나 축소될 수 있는 제목을 클릭할 때 방법을 찾으려고 노력한다.

나는 내 것을 찾았다.sectionComp그리고renderSectionItem같은 명칭을 사용하므로 사용하려고 한다.this.state{ title: '', expand: false }

클릭할 때國興戲院사용하다this.setState({ title: '國興戲院', expand: true })그리고 처럼 사용하다.if(this.state.expand) {}에renderSectionItem

분명히 내가 많은 부분을 가지고 있을 수 있기 때문에 그것은 작동하지 않는다.

어떤 다음 단계를 밟아야 할지 모르겠다.

어떤 도움이라도 감사할 것이다.미리 고맙다.

다음은 내 섹션 목록 데이터:

다음은 내 수업 구성요소다.

import React, { Component } from 'react';
import { Text, SectionList, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import { View } from 'react-native-animatable';
import { fetchSearchTime } from '../actions';
import { Spinner } from './common';
import GetUserTime from '../function/common/GetUserTime';

class MovieCloseTime extends Component {
  constructor(props) {
    super(props);
    const { selectedCity, firstSliderValue, secondSliderValue } 
    = this.props.navigation.state.params;
    this.state = { 
      selectedCity, 
      firstSliderValue, 
      secondSliderValue,
    };
  }

  componentDidMount() {
    const { selectedCity, firstSliderValue, secondSliderValue } = this.state;

    this.props.fetchSearchTime({ 
        selectedCity, firstSliderValue, secondSliderValue
    });
  }

  sectionComp = (info) => {
    const theaterCn = info.section.title;
    console.log('Title info is =>');
    console.log(info);
    return (
      <TouchableOpacity 
        onPress={() => console.log('Hot to expand and collapse specify section when click here?')}
      >
        <View style={{ flex: 1, backgroundColor: '#DCDCDC' }}>
          <Text style={styles.sectionTitle}>{theaterCn}</Text>
        </View>
      </TouchableOpacity>
    );
  }

  renderSectionItem = (info) => {
    const cnName = info.item.cnName;
    console.log('Section info is =>');
    console.log(info);

    return (
      <TouchableOpacity 
        onPress={() => {
        this.props.navigation.navigate('MovieDetail', {
          enCity: this.state.selectedCity,
          cnName
          });
        }
        }
      >
      <View style={{ flex: 1, flexDirection: 'column' }}>

        <Text style={styles.sectionSubTitle}>{cnName}</Text>

        <View style={{ flexDirection: 'row', flexWrap: 'wrap', backgroundColor: '#F8F8FF' }}>
        {info.item.releasedTime.map((value, index) => {
          const theTime = GetUserTime.getAsiaTime(value, 'YYYY/MM/DD HH:mm:ss');
          const hour = theTime.getHours();            
          const minute = (theTime.getMinutes() < 10 ? '0' : '') + theTime.getMinutes();
          return (
            <Text style={styles.sectionTimeTitle} key={index}>{`${hour}:${minute}`}</Text>
          );
        })
        }
        </View>
      </View>
      </TouchableOpacity>
    );
  }

  render() {
    const movieData = this.props.searchTime;
    if (this.props.loading) {
      return <Spinner text='Loading...' />;
    }
    console.log('movieData is =>');
    console.log(movieData);

    return (
      <View style={{ flex: 1 }}>
        <SectionList
          renderSectionHeader={this.sectionComp}
          renderItem={this.renderSectionItem}
          sections={movieData}
          keyExtractor={(item, index) => index}
          ItemSeparatorComponent={() => <View style={styles.separator} />}
        />
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  const searchTime = state.searchTime.searchList;
  const loading = state.searchTime.loading;

  return { searchTime, loading };
};

const styles = {
  // some styles
};


export default connect(mapStateToProps, { fetchSearchTime })(MovieCloseTime);

여기 내 행동이 있다.fetchSearchTime:

export const fetchSearchTime = ({ selectedCity, firstSliderValue, secondSliderValue }) => {
  return (dispatch) => {
    dispatch({ type: SEARCH_TIME_REQUEST });
    console.log(`https://obscure-reaches-65656.herokuapp.com/api/getCloseTime?city=${selectedCity}&sTime=${firstSliderValue}&eTime=${secondSliderValue}`);
    fetch(`https://obscure-reaches-65656.herokuapp.com/api/getCloseTime?city=${selectedCity}&sTime=${firstSliderValue}&eTime=${secondSliderValue}`)
      .then(response => response.json())
      .then(responseData => {
        const movieData = responseData.reduce((r, s) => {
          r.push({ title: s.theaterCn, id: s._id, expand: true, data: s.movie });
          return r;
        }, []);
        //dispatch({ type: SEARCH_TIME, payload: responseData });
        dispatch({ type: SEARCH_TIME, payload: movieData });
      })
      .catch((error) => console.log(error));    
    };  
};

유형 정보SEARCH_TIME환원기:

// with others type
import { 
  SEARCH_TIME_REQUEST,
  SEARCH_TIME
} from '../actions/types';

const INITIAL_STATE = {
  searchList: [],
  loading: true,
  selectedCity: '',
  firstSliderValue: '',
  secondSliderValue: ''
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case SEARCH_TIME_REQUEST:
      return {
        searchList: [],
        loading: true,
      };
    case SEARCH_TIME:
      return {
        searchList: action.payload,
        loading: false
      };
    default:
      return state;
  }
};

참조URL: https://stackoverflow.com/questions/50605588/how-to-expand-and-collapse-specify-section-using-secionlist