如何在平面列表项 onpress 中获取参考？

Question

我正在尝试使用 react-native-view-shot 捕获屏幕。按 this.refs.viewShot.capture 显示未定义。

这是我的代码

平面列表代码：

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

按下时呈现 link:

<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

代码量很大。尝试 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 2

试试这个：

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

如何在平面列表项 onpress 中获取参考？

How to get ref in flat list item onpress?

screenshot

react-native