Как получить ссылку в элементе плоского списка при печати?

Я пытаюсь захватить экран с помощью реакции на собственный вид. При нажатии this.refs.viewShot.capture отображается неопределенное значение.

Вот мой код

Код плоского списка:

<FlatList
                  ref={(list) => this.myFlatList = list}
                  data={this.state.newsListArray}
                  keyExtractor={this._keyExtractor}
                  renderItem={this.renderRowItem}
                />

визуализировать по пресс-ссылке:

<TouchableOpacity onPress={ () => {
                Platform.OS === 'ios' ?
                this._captureScreenIos('5c63f7307518134a2aa288ce') :
                this._captureScreenAndroid('5c63f7307518134a2aa288ce')
              }}>
                <View style={{flexDirection:'row'}}>
                  <Icon name="share-alt" size={16} color="#ffb6cf" />
                  <Text style={{paddingLeft:6,fontSize:12,fontWeight:'500'}}>Share News</Text>
                </View>
              </TouchableOpacity>

И это функция:

_captureScreenIos = (refId) => {
    console.log("Clicked for IOS");
    this.changeLoaderStatus();
    var thisFun = this;
    var viewShotRef = 'viewShot-5c63f7307518134a2aa288ce';
     this.myFlatList.viewShot.capture({width: 2048 / PixelRatio.get(), height: 2048 / PixelRatio.get()}).then(res => {
       RNFetchBlob.fs.readFile(res, 'base64').then((base64data) => {
         console.log("base64data",base64data)
         let base64Image = `data:image/jpeg;base64,${base64data}`;
         const shareOptions = {
           title: "My Beauty Squad",
           //message: "Download my beauty squad with below link."+ "\n" + "https://itunes.apple.com/uk/app/my-beauty-squad/id1454212046?mt=8" ,
           url: base64Image,
           subject: "Share news feed"
         };
         Share.open(shareOptions);
         thisFun.changeLoaderStatus();
       })
     }).catch(error => {
       console.log(error, 'this is error');
       this.changeLoaderStatus();
     })
    }

Пожалуйста, дайте мне знать, если у кого-то есть решение для того же.

**Это экран моего приложения** enter image description here

Это размытие, когда у нас есть элементы длинного списка. enter image description here

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
1 031
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это хороший объем кода. Попробуйте https://reactnativecode.com/take-screenshot-of-app-programmatically/ установите состояние и попробуйте передать объект, на который вы ссылаетесь.

    export default class App extends Component {

      constructor(){

        super();

        this.state={

          imageURI : 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg'

        }
      }

      captureScreenFunction=()=>{

        captureScreen({
          format: "jpg",
          quality: 0.8
        })
        .then(
          uri => this.setState({ imageURI : uri }),
          error => console.error("Oops, Something Went Wrong", error)
        );

      }


Я использую это в плоском списке, можете ли вы поделиться обновленным кодом, чтобы помочь мне в этом.

Rahul Mishra 22.05.2019 11:11
Ответ принят как подходящий

Попробуй это:

import { captureRef } from react-native-view-shot

constructor(props) { 
   super(props); 
   this.refs = {}; 
}
renderItem = ({item, index}) => (
   <TouchableOpacity 
       onPress={ () => { 
           captureRef(this.refs[`${index}`], options).then(.....)   
       }
   > 
      <View 
        style={{flexDirection:'row'}}
        ref={shot => this.refs[`${index}`] = shot}
      >
        ...........
      </View>
   </TouchableOpacity>
)

React Native View Shot

Я надеюсь, что это поможет вам.

Теперь я получаю эту ошибку: «Похоже, аргумент не является ReactComponent. Ключи: 0,1,2,3»

Rahul Mishra 22.05.2019 11:31

Обновленный ответ.

Muhammad Mehar 22.05.2019 11:53

Он захватывает полное изображение плоского списка вместо снимка экрана элемента. Если так или иначе, мы можем удалить размытие на длинных изображениях, что также является решением для меня ... я застрял с последних 4 дней.

Rahul Mishra 22.05.2019 11:57

Я только что добавил 2 экрана. 1-й — это мой экран, на котором каждый элемент, имеющий кнопку «Поделиться новостями», будет захвачен и передан только этому изображению раздела... 2-й — если я добавлю кнопку «Поделиться» на странице сведений для некоторых новостей, получающих ту же проблему размытие при длинных данных... так что это не работает для обеих сторон.

Rahul Mishra 22.05.2019 12:04

И не я очень расстроен из-за ничего, чтобы помочь мне в этом.

Rahul Mishra 22.05.2019 12:04

<View collapsable={false} ref={(shot) => { this.screenshot = shot; }} > У меня работает захват элемента, но остается только проблема, заключающаяся в том, что каждый раз захватывается последний элемент списка.

Rahul Mishra 22.05.2019 13:36

Обновленный ответ.

Muhammad Mehar 22.05.2019 14:11

Моя ссылка на общий доступ находится внизу, поэтому я не могу вставить в нее представление.

Rahul Mishra 22.05.2019 14:34

Вот ответ:

constructor(props) {
  this.screenshot = {};
}

Это моя функция:

_captureScreenIos(itemId) {
    this.changeLoaderStatus();
    var thisFun = this;
    var viewShotRef = itemId;
     captureRef(this.screenshot[itemId],{format: 'jpg',quality: 0.8}).then(res => {
       RNFetchBlob.fs.readFile(res, 'base64').then((base64data) => {
         console.log("base64data",base64data)
         let base64Image = `data:image/jpeg;base64,${base64data}`;
         const shareOptions = {
           title: "My Beauty Squad",
           //message: "Download my beauty squad with below link."+ "\n" + "https://itunes.apple.com/uk/app/my-beauty-squad/id1454212046?mt=8" ,
           url: base64Image,
           subject: "Share news feed"
         };
         Share.open(shareOptions);
         thisFun.changeLoaderStatus();
       })
     }).catch(error => {
       console.log(error, 'this is error');
       this.changeLoaderStatus();
     })
    }

Это вид:

    <View collapsable={false} ref={(shot) => { this.screenshot[itemId] = shot; }} >
    //some content here

<TouchableOpacity onPress={ () => {
                Platform.OS === 'ios' ?
                this._captureScreenIos(itemData.item._id) :
                this._captureScreenAndroid(itemData.item._id)
              }}>
                <View style={{flexDirection:'row'}}>
                  <Icon name="share-alt" size={16} color="#ffb6cf" />
                  <Text style={{paddingLeft:6,fontSize:12,fontWeight:'500'}}>Share News</Text>
                </View>
              </TouchableOpacity>
      </View>

Другие вопросы по теме