Question

我在我的应用中使用react-native-camera模块。对于这个例子，一切都很好。我的问题是在另一页上显示我的图像。这是我的代码：

'use strict';

var React = require('react-native');
var styles = require('./common/styles.js');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  TouchableOpacity,
  Navigator,
} = React;

var Camera = require('react-native-camera'); //require the camera component
var capturedBase64='';
var PageCamera = React.createClass({
    getInitialState: function() {
        return ({
            capturedBase64: '',
            type: Camera.constants.Type.back
        });
    },

    switchCamera: function() {
        this.setState({ type: this.state.type === Camera.constants.Type.back ? Camera.constants.Type.front : Camera.constants.Type.back });
    },

    render(){
      var component = this;
      return (
    <View style={styles.parent}>
        <View style={styles.container}>
          <Camera style={styles.camera} ref="cam" type={this.state.type} captureTarget={Camera.constants.CaptureTarget.memory}></Camera>
          <TouchableHighlight style={styles.captureButton} onPress={() => {component.refs.cam.capture({ sampleSize: 10 }).then(function(capturedBase64) {
                component.setState({ capturedBase64 })});}}>
            <Text style={{textAlign: 'center'}}>Capture</Text>
          </TouchableHighlight>
          <TouchableHighlight style={styles.switchButton} onPress={this.switchCamera}>
            <Text style={{textAlign: 'center'}}>Switch</Text>
          </TouchableHighlight>
        </View>
        <View style={styles.navigation_bar_bas}>
        <TouchableHighlight style={styles.buttonNavigation} onPress={ () => this.props.navigator.push({id: 'PersonPage', sceneConfig: Navigator.SceneConfigs.FloatFromLeft, img:capturedBase64, page:'camera'})}>
          <Text style={styles.item_text}>Précédent</Text>
        </TouchableHighlight>
        <TouchableHighlight style={styles.buttonNavigation}>
          <Text style={styles.item_text}></Text>
        </TouchableHighlight>
        </View>
    </View>
    );
    }
});

module.exports = PageCamera;

如果我添加

，我可以显示我的图像

 <Image>

，作为示例，或者如果我将目标更改为cameraRoll，我可以在我的图库中找到我的图像。我想将我的图像发送到另一个页面（PersonPage）。如果可以使用“记忆”，你现在可以吗？？我可以使用＆＃39; cameraRoll＆＃39; （cameraRoll模块对于Android来说不是开源的。）？

感谢您的帮助。

Answer 1

根据documentation memory目标已被弃用。

如果您使用disk目标代替cameraRoll，您将获得以下链接：/Users/user/Library/Developer/CoreSimulator/Devices/XXXXXXX-09F8-4DC2-XXXA-69E79B6XXX45/data/Containers/Data/Application/41424B58-XXXX-40AF-989C-3E877116XXXX/Documents/XXXXC461-6870-4B73-XXXX-D875E8985533.jpg

将此链接用作uri代码中的常规image参数：

<Image source={{uri: this.props.linkFromPreviousScene}}/>

使用react-native-camera拍照

1 个答案: