Снимок экрана в React Native (Android)

Я использую React-Native-View-Shot Library, чтобы сделать снимок экрана. всего экрана.

В документации упоминается, что метод captureScreen ():

captureScreen () захватит содержимое текущего отображаемого экрана как снимок экрана собственного оборудования. Для него не требуется ввод ссылки, так как он не работает на уровне представления. Это означает, что ScrollViews не будут захвачены полностью - только те части, которые в данный момент видны пользователю.

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

Код:

takeScreenshot() {
    captureScreen({
        format: "jpg",
        quality: 0.8
    }).then(
        uri => { savePath = uri; console.log("Image saved to", uri); CameraRoll.saveToCameraRoll(uri); ToastAndroid.show(uri + "", ToastAndroid.SHORT); },
        error => console.error("Oops, snapshot failed", error)
        );
}

render() {
    return (
        <View style={styles.container}>
            <Text style={{backgroundColor:"white"}}>Hello World</Text>
            <RNCamera style={styles.preview}
                ref={ref => {
                    this.camera = ref;
                }}
                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'}>
            </RNCamera>
            <Button title="Capture" onPress={()=>this.takeScreenshot()}/>
        </View>
    )
}

RNCamera - это компонент камеры из react-native-camera

Ожидаемый результат

Полученный результат

На упомянутый вопрос тоже не было ответа

В чем может быть проблема? Почему компоненты тоже закрыты предварительным просмотром камеры?


react-native react-native-android screenshot react-native-camera
person Community    schedule 19.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward 

import ViewShot from "react-native-view-shot";

<ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 
     }}>
<View style={styles.container} ref='snapViewPic'>
     <RNCamera style={styles.preview}
            ref={ref => {
                this.camera = ref;
            }}
            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'}>
        </RNCamera>
 </View>
</ViewShot>

takeScreenShot () {
    this.refs.viewShot.capture().then(uri => {
     console.log("do something with ", uri);
    });
}

Убедитесь, что ваши «кнопка захвата» и «привет, мир» не должны находиться в поле зрения «контейнер».

У меня это работает.

person krish    schedule 28.09.2018