Блог

Я использую react-native-camera с группой кнопок, которые делают снимки, поскольку я хочу заполнить свое приложение большим количеством контента на одном экране, тогда я использую компонент ScrollView. Всякий раз, когда я нажимаю кнопку, чтобы сделать снимок, я визуализирую компонент камеры, но при возвращении к моему основному виду ScrollView сбрасывает свое положение. Для этого я использую условный рендеринг. Я визуализирую камеру или основной вид с содержимым. Есть ли простой или правильный способ добиться этого?

Итак, я знаю, что есть способ прокручивать до определенного положения с помощью scrollview, включая анимацию, но это может работать с прослушивателями для каждой кнопки, которая у меня есть для камеры. Я все еще не знаю, какой вариант для этого лучший.

 import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Button, ScrollView } from 'react-native';
import { RNCamera } from 'react-native-camera';

export default class BadInstagramCloneApp extends Component {
  constructor(props){
    super(props);
    this.state = {
      pictureType: null,
      isVisible: false,
      value1: null,
      value2: null
    }
  }

  render() {
    return (
        <View style={styles.subcontainer}>
          {this.state.isVisible === true
              ?
                <View style={styles.container}>
                  <RNCamera
                      ref={ref => {
                        this.camera = ref;
                      }}
                      style={styles.preview}
                      type={RNCamera.Constants.Type.back}
                      flashMode={RNCamera.Constants.FlashMode.on}
                      permissionDialogTitle={'Permission to use camera'}
                      permissionDialogMessage={'We need your permission to use your camera phone'}
                      onGoogleVisionBarcodesDetected={({ barcodes }) => {
                        console.log(barcodes);
                      }}
                  />
                  <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                    <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
                      <Text style={{ fontSize: 14 }}> SNAP </Text>
                    </TouchableOpacity>
                  </View>
                </View>
              :
                <ScrollView>
                  <Button title='PHOTO 1' onPress={() => this.initTakingPicture("A")}/>
                  <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam enim ex,
                    vehicula quis rhoncus et, tristique vitae est. Nullam nec odio est.
                    Nunc diam dolor, sagittis sed scelerisque nec, fringilla at tortor.
                    Donec vitae nibh risus. Integer et cursus ante.
                    Aliquam sodales elementum nisl, a bibendum ipsum sollicitudin eget.
                    Praesent non molestie augue. Curabitur at dui nunc.
                    Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci
                    luctus et ultrices posuere cubilia Curae; Donec sodales lacus et ex
                    posuere elementum. Pellentesque egestas eros ut elit viverra, maximus volutpat diam
                    rhoncus. Proin sed lacinia quam. Nunc a leo ullamcorper, accumsan lectus vitae,
                    tristique mauris. Duis non eros quis nisi efficitur laoreet non sit amet neque.
                    Aenean egestas, urna eget ultricies pretium, ligula ex euismod libero, ac dignissim sem velit vitae ex. Proin consequat quam sed tellus ornare, feugiat porta sapien lacinia. Integer scelerisque auctor lorem mattis lobortis. Sed consequat at nibh vel consequat. Ut ullamcorper aliquet commodo. Nam elementum sed elit ut aliquet. Proin urna est, ullamcorper in elit ut, tristique eleifend nisl.

                    Nulla facilisi. Duis in mollis urna. Cras lacus lectus, vulputate ut eleifend at, egestas eu arcu. Cras ornare nibh a euismod vestibulum. Vivamus facilisis sem non est dictum, ac porta massa venenatis. Duis non dolor fringilla, fringilla dui quis, feugiat arcu. Nullam in turpis id augue consectetur volutpat et eget arcu. Praesent tincidunt sit amet ligula ac bibendum.

                    Ut mollis vitae ex sed pellentesque. In et viverra leo, eu pulvinar velit. Nunc a maximus sem. Nunc venenatis turpis eu accumsan rutrum. Proin lacinia velit et ex venenatis, sed convallis nisi sodales. Aenean placerat dapibus ultrices. Aenean et interdum mauris. Etiam quis ante tincidunt, dapibus orci in, finibus velit. Cras lorem nibh, commodo at posuere ac, porta sodales massa. Nulla mollis cursus eros, a rhoncus magna posuere at. Fusce orci augue, sodales eget ligula at, lacinia vulputate lectus.

                    Cras rhoncus augue sed eleifend sagittis. Proin fermentum ut ligula eu faucibus. Sed ullamcorper urna lacus, eget venenatis felis aliquet at. Ut orci turpis, porttitor tempus sem quis, fringilla porta ante. Mauris bibendum enim purus, et congue ipsum cursus quis. Nunc quis aliquam erat. Phasellus id turpis at dui iaculis laoreet. Quisque sed tincidunt lacus. Ut efficitur, sapien id lacinia congue, lorem tortor dictum magna, ac eleifend lectus ligula non diam. Nulla enim orci, faucibus et sagittis a, mattis nec felis. Nunc ex mauris, ornare eget tellus vitae, sollicitudin fermentum sapien. Donec mollis nec nunc laoreet ultricies. Suspendisse imperdiet quam non molestie pellentesque. Maecenas facilisis urna eget tortor viverra cursus. Pellentesque lacinia lacinia turpis, eget lobortis sapien.
                  </Text>
                  <Button title='PHOTO 2' onPress={() => this.initTakingPicture("B")}/>
                  <Button title='SHOW RESULTS' onPress={this.showResults}/>
                </ScrollView>
          }
        </View>
    );
  }

  showResults = () => {
    console.log('VALOR1: '   this.state.value1);
    console.log('VALOR2: '   this.state.value2);
  }

  takePicture = async function() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
      let fieldToSave = "value1" // Fallback
      if (this.state.pictureType === "A") {
        // Operation you need to do for pictureType A
        fieldToSave = "value1"
        //FIELTOSAVE DEBE OPTIMIZARSE Y GUARDAR SU VALOR EN LOCAL STATE
        //NO HACE FALTA CAMBIAR PARAMETROSS A ENVIAR PORQUE TOMAN EL MISMO NOMBRE
      } else if (this.state.pictureType === "B") {
        // Operation you need to do for pictureType B
        fieldToSave = "value2"
      }

      this.setState({
        isVisible: false,
        pictureType: null,
        [fieldToSave]: data.uri
      });
    }
  };

  initTakingPicture = (pictureType) => {
    this.setState({
      isVisible: true,
      pictureType: pictureType
    })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black'
  },
  subcontainer: {
    flex: 1,
    flexDirection: 'column',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

  

На всякий случай я использовал некоторый Lorem Ipsum, чтобы заполнить все содержимое и заставить ScrollView прокручиваться, чтобы увидеть саму проблему.

Я ожидаю, что сам ScrollView сохранит свое положение, не сбрасываясь после повторного рендеринга

Хорошо, итак, как сказал пользователь @Javan_Poirier, есть способ сделать это. Сначала я использовал прослушиватель, подключенный к компоненту scrollview, который способен получать текущую позицию ‘OnScroll’. Затем сохраните это значение в state value. Наконец, я вызываю метод каждый раз, когда нажимаю кнопку, которая показывает камеру, и обновляю текущее положение до значения состояния, поэтому в следующий раз, когда контент будет отображаться снова, я установлю для scrollview position для себя состояние.