Щепотка, чтобы увеличить масштаб в плоском списке реагировать - PullRequest
Новая
       42

Щепотка, чтобы увеличить масштаб в плоском списке реагировать

0 голосов
/ 21 ноября 2018

Я использую API-интерфейс поиска изображений flickr для рендеринга изображений в формате сетки с использованием плоского списка.Используя maximumZoomScale и minimumZoomScale scrollView (только для iOS), я могу реализовать zoomin для изменения структуры сетки с 3 столбцов на два столбца и наоборот. Однако при изменении этого макета (из-за повторного рендеринга) плоский список снованачинается сверху, даже если я прокрутил изображение до конца.Есть ли способ сохранить плоский список, показывающий тот же элемент, даже при динамическом изменении количества столбцов? 

 export default class BrowserHome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      tagParam: "cat",
      pageNum: -1,
      data: [],
      photosObj: "",
      totalColumn: 3
    };
    this.handleScroll = this.handleScroll.bind(this);
  }

  state = { onEndReachedCalledDuringMomentum: true };

  //Lifecycle methods
  componentDidMount() {
    this.setState({
      isLoading: true
    });
    try {
      this.makeRequest();
    } catch {
      console.log("error has occurred");
    }
  }

  makeRequest = () => {
    const { tagParam, pageNum } = this.state;
    let url = `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&format=json&tags=${tagParam}&per_page=30&page=${pageNum +
      1}&nojsoncallback=1`;
    fetch(url, {
      method: "GET"
    })
      .then(response => response.json())
      .then(responseJSON => {
        this.setState({
          //data: responseJSON.photos.photo,
          data: this.state.data.concat(responseJSON.photos.photo),
          isLoading: false,
          pageNum: responseJSON.photos.page
        });
      })
      .catch(error => {
        console.log(error);
        this.setState({ isLoading: false });
        throw error;
      });
  };

  render() {   
    return (
      <View
        style={{
          flex: 1,
          height: 200,
          justifyContent: "flex-start",
          width: screenSize.width,
          backgroundColor: "black"
        }}
      >
        <Text>This is browserhome</Text>
        <FlatList
          minimumZoomScale={0.8}
          maximumZoomScale={2}
          key={this.state.totalColumn}
          onScroll={this.handleScroll}
          style={{
            width: screenSize.width
          }}
          numColumns={this.state.totalColumn}
          data={this.state.data}
          keyExtractor={item => item.id}
          bounces={false}
          onEndReachedThreshold={0.5}
          onMomentumScrollBegin={() => {
            this.onEndReachedCalledDuringMomentum = false;
          }}
          onEndReached={({ distanceFromEnd }) => {
            if (!this.onEndReachedCalledDuringMomentum) {
              this.loadMoreItem();
              this.onEndReachedCalledDuringMomentum = true;
            }
          }}
          renderItem={({ item, index }) => (
            <>
              <ImageTile
                imageURL={this.createImageURL(item)}
                column={this.state.totalColumn}
              />
              {/* <Text style={{ color: "white" }}>
                {index}
                {console.log(index)}
              </Text> */}
            </>
          )}
        />
      </View>
    );
  }

  loadMoreItem() {
    this.makeRequest();
  }

  handleScroll(event) {
    console.log(event.nativeEvent.zoomScale);
    if (event.nativeEvent.zoomScale > 1) {
      this.setState({
        totalColumn: 2
      });
    } else if (event.nativeEvent.zoomScale < 0.95) {
      this.setState({
        totalColumn: 3
      });
    }
  }
}
...