Question

我呼叫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

显然它不起作用，因为我可能有很多部分。

我不知道我应该尝试下一步。

任何帮助将不胜感激。提前谢谢。

这是我的SectionList数据：

这是我的班级组件：

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 reducer：

// 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;
  }
};

如何使用SecionList展开和折叠指定部分？

0 个答案: