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

Question

Я пытаюсь сделать снимок экрана с помощью реакции на исходный вид.На прессе 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();
     })
    }

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

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

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

Answer 1

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

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

Надеюсь, это поможет вам.

Answer 2

Это хороший объем кода.Попробуйте 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)
        );

      }

Answer 3

Вот ответ:

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>