Как получить ссылку в элементе плоского списка при печати?
Я пытаюсь захватить экран с помощью реакции на собственный вид. При нажатии 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();
})
}
Пожалуйста, дайте мне знать, если у кого-то есть решение для того же.
**Это экран моего приложения**
Это размытие, когда у нас есть элементы длинного списка.
Ответы 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)
);
}
Попробуй это:
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>
)
Я надеюсь, что это поможет вам.
Теперь я получаю эту ошибку: «Похоже, аргумент не является ReactComponent. Ключи: 0,1,2,3»
Обновленный ответ.
Он захватывает полное изображение плоского списка вместо снимка экрана элемента. Если так или иначе, мы можем удалить размытие на длинных изображениях, что также является решением для меня ... я застрял с последних 4 дней.
Я только что добавил 2 экрана. 1-й — это мой экран, на котором каждый элемент, имеющий кнопку «Поделиться новостями», будет захвачен и передан только этому изображению раздела... 2-й — если я добавлю кнопку «Поделиться» на странице сведений для некоторых новостей, получающих ту же проблему размытие при длинных данных... так что это не работает для обеих сторон.
И не я очень расстроен из-за ничего, чтобы помочь мне в этом.
<View collapsable={false} ref={(shot) => { this.screenshot = shot; }} > У меня работает захват элемента, но остается только проблема, заключающаяся в том, что каждый раз захватывается последний элемент списка.
Обновленный ответ.
Моя ссылка на общий доступ находится внизу, поэтому я не могу вставить в нее представление.
Вот ответ:
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>
Я использую это в плоском списке, можете ли вы поделиться обновленным кодом, чтобы помочь мне в этом.