React Native Screen Shot, содержащий компоненты наложения - PullRequest
Новая
       8

React Native Screen Shot, содержащий компоненты наложения

0 голосов
/ 22 февраля 2019

Я пытаюсь создать собственное приложение, которое делает снимки экрана предварительного просмотра камеры с компонентами наложения, включенными в снимок экрана.(Этакая ленивая / прагматичная попытка сделать камеру-стикер, которая включает изображения на ваших фотографиях).Когда я впервые попробовал { captureScreen } from "react-native-view-shot"; со статическим изображением, сохранив текущий экран в состоянии, он работал хорошо, сохранив в галерее Android (CameraRoll), написанной в App.js, как показано ниже: (возврат для рендера) return ( <View style={styles.MainContainer}> <Image source={{uri : this.state.imageURI}} style={{width: 200, height: 300, resizeMode: 'contain', marginTop: 5}} /> <Button title="Press to screenshot" onPress={this.takeScreenShot} /> <Button title="Press to save to CameraRoll" onPress={()=>CameraRoll.saveToCameraRoll(this.state.imageURI)}/> </View>);

Однако, когда я попытался использовать тот же код, но только с предварительным просмотром камеры в качестве фона, файлы, сохраненные в приложении галереи (CameraRoll), не отображали наложенные компоненты.Подводя итог, можно сказать, что захват текущего просматриваемого экрана в целом методом react-native-view-shot {captureScreen} работал при использовании пустого представления, содержащего компоненты поверх него.Однако после использования с предварительным просмотром камеры в качестве фона наложенные компоненты не были сохранены в сохраненных файлах .jpg.Код для захвата экрана камеры, как показано ниже. 

  render() {
    const { hasPermission } = this.state;
    if (hasPermission === null) {
      return <Text />;
    }
    if (hasPermission === false) {
      return <Text>Please Give Permission</Text>;
    }
    return (
      <View style={{ flex: 1, padding: 0, zIndex: 0 }}>
        <Text style={{ zIndex: 2, top: 50, left: 100 }}>overlay1</Text>
        <Camera style={{ width: width, height: height, zIndex: 1 }}>
          <Text style={{ zIndex: 1, top: 50, left: 100 }}>overlay2</Text>
        </Camera>

        <TouchableOpacity
          style={{
            position: "absolute",
            bottom: 10,
            alignItems: "center",
            zIndex: 2
          }}
          onPress={this.takeScreenShot}
        >
          <Text style={{ fontSize: 18, marginBottom: 10, color: "black" }}>
            {""}capture{""}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            position: "absolute",
            bottom: 20,
            alignItems: "center",
            zIndex: 2
          }}
          onPress={() => CameraRoll.saveToCameraRoll(this.state.imageURI)}
        >
          <Text style={{ fontSize: 18, marginBottom: 10, color: "black" }}>
            {""}save{""}
          </Text>
        </TouchableOpacity>

        <View
          style={{
            zIndex: 2,
            position: "absolute",
            top: 50,
            left: 50,
            width: 100,
            height: 100,
            backgroundColor: "black"
          }}
        />
      </View>
    );
  }
}
...