Javascript 将照片uri传递给React Native中的Image元素

我有一个名为imagePicker.js的文件，它返回一个显示手机摄像头图像的视图。单击图像后，我希望能够单击显示“编辑”的按钮，并导航到照片编辑屏幕photoScreen.js，编辑我选择的照片。然而，当我成功地导航到照片编辑屏幕时，我不知道如何将所选图像的uri传递到照片编辑屏幕上的image元素中

Routes.js导航

class Routes {
static register(name, handler) {
 if (this.handlers == null) this.handlers = {}
 this.handlers[name] = handler
}
static get(name, params) {
 if (this.handlers[name] == null) throw new Error('unknown route')
 return this.handlers[name](params)
}
static imagePicker() {
 return {
  component: require('./imagePicker'),
}
}
static photoScreen(image) {
 return {
  component: require('./photoScreen'),

  passProps: {image: image}
}
}

}

module.exports = Routes

imagePicker.js照片库和选择屏幕

const React = require('react-native');
var Routes = require('./Routes')

const {

StyleSheet,
Text,
View,
ScrollView,
Image,
CameraRoll,
TouchableHighlight,
NativeModules,
} = React;

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
},
imageGrid: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center'
},
image: {
    width: 100,
    height: 100,
    margin: 10,
}
});

const imagePicker = React.createClass({
getInitialState() {
    return {
        images: [],
        selected: '',
    };
},

componentDidMount() {
    const fetchParams = {
        first: 25,
    };
    CameraRoll.getPhotos(fetchParams, this.storeImages, this.logImageError);
},

storeImages(data) {
    const assets = data.edges;
    const images = assets.map((asset) => asset.node.image);
    this.setState({
        images: images,
    });
},

logImageError(err) {
    console.log(err);
},

gotoPhoto(image) {
    this.props.route.push(Routes.photoScreen(image))
  },


selectImage(uri) {
    NativeModules.ReadImageData.readImage(uri, (image) => {
        this.setState({
            selected: image,
        });
        console.log(image);
    });
},

render() {
    return (
        <ScrollView style={styles.container}>
            <View style={styles.imageGrid}>
            { this.state.images.map((image) => {
                return (
                    <TouchableHighlight onPress={this.selectImage.bind(null, image.uri)}>
                    <Image style={styles.image} source={{ uri: image.uri }} />
                    </TouchableHighlight>
                );
                })
            }
            </View>
            <TouchableHighlight onPress={this.gotoPhoto} ><Text>edit</Text></TouchableHighlight>
        </ScrollView>
    );
}
});

module.exports = imagePicker

photoScreen.js照片编辑屏幕

var React = require('react-native');
var GL = require('gl-react-native');

var {
AppRegistry,
StyleSheet,
Text,
Image,
View,
ScrollView,
SliderIOS
} = React;


var photoScreen = React.createClass({
getInitialState: function() {
return {
  width:0,
  height: 0,
  saturation: 1,
  brightness: 1,
  contrast: 1,
  hue: 0,
  sepia: 0,
  gray: 0,
  mixFactor: 0
};
},
renderWithDimensions: function(layout) {
var {
  width,
  height
} = layout.nativeEvent.layout;
this.setState({
  width,
  height
})
},
getImage: function() {
var {image} = this.props
return (
  <Instagram 
    brightness={this.state.brightness}
    saturation={this.state.saturation}
    contrast={this.state.contrast}
    hue={this.state.hue}
    gray={this.state.gray}
    sepia={this.state.sepia}
    mixFactor={this.state.mixFactor}
    width={this.state.width}
    height={this.state.height}
  >
    <Image
      source={{uri: image.uri}}
      style={styles.cover}
      resizeMode="cover"
    />
  </Instagram>

 )
 },
render: function() {
return (
  <View style={styles.container}>
    <View style={styles.container} onLayout={this.renderWithDimensions}>
      { this.state.width ? this.getImage() : null}
    </View>
    <ScrollView style={styles.container}>
      <View>
        <Text>Blend Factor: {this.state.mixFactor}</Text>
        <SliderIOS
          value={this.state.mixFactor}
          minimumValue={0}
          maximumValue={2}
          onValueChange={(mixFactor) => this.setState({mixFactor})}
        />
      </View>
      <View>
        <Text>Brightness: {this.state.brightness}</Text>
        <SliderIOS
          value={this.state.brightness}
          minimumValue={0}
          maximumValue={3}
          onValueChange={(brightness) => this.setState({brightness})}
        />
      </View>
      <View>
        <Text>Saturation: {this.state.saturation}</Text>
        <SliderIOS
          value={this.state.saturation}
          minimumValue={0}
          maximumValue={3}
          onValueChange={(saturation) => this.setState({saturation})}
        />
      </View>
      <View>
        <Text>Contrast: {this.state.contrast}</Text>
        <SliderIOS
          value={this.state.contrast}
          minimumValue={0}
          maximumValue={3}
          onValueChange={(contrast) => this.setState({contrast})}
        />
      </View>
      <View>
        <Text>Sepia: {this.state.sepia}</Text>
        <SliderIOS
          value={this.state.sepia}
          minimumValue={0}
          maximumValue={1}
          onValueChange={(sepia) => this.setState({sepia})}
        />
      </View>
      <View>
        <Text>Grayscale: {this.state.gray}</Text>
        <SliderIOS
          value={this.state.gray}
          minimumValue={0}
          maximumValue={1}
          onValueChange={(gray) => this.setState({gray})}
        />
      </View>
      <View>
        <Text>Hue: {this.state.hue}</Text>
        <SliderIOS
          value={this.state.hue}
          minimumValue={0}
          maximumValue={10}
          onValueChange={(hue) => this.setState({hue})}
        />
      </View>
    </ScrollView>
  </View>
);
}
});

var styles = StyleSheet.create({
 container: {
 flex: 1
 },
cover: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}

});



const shaders = GL.Shaders.create({
instagram: {
frag: `
  precision highp float;
  varying vec2 uv;
  uniform sampler2D tex;
  // uniform float hue;
  uniform float saturation;
  uniform float brightness;
  uniform float contrast;
  uniform float hue;
  uniform float gray;
  uniform float sepia;
  uniform float mixFactor;

  const vec3 W = vec3(0.2125, 0.7154, 0.0721);
  const mat3 rgb2yiq = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135);
  const mat3 yiq2rgb = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.1070, 1.7046);
  const vec3 SEPIA = vec3(1.2, 1.0, 0.8);

  vec3 BrightnessContrastSaturation(vec3 color, float brt, float con, float sat)
  {
    vec3 black = vec3(0., 0., 0.);
    vec3 middle = vec3(0.5, 0.5, 0.5);
    float luminance = dot(color, W);
    vec3 gray = vec3(luminance, luminance, luminance);

    vec3 brtColor = mix(black, color, brt);
    vec3 conColor = mix(middle, brtColor, con);
    vec3 satColor = mix(gray, conColor, sat);
    return satColor;
  }

  vec3 multiplyBlender(vec3 Color, vec3 filter){
    vec3 filter_result;
    float luminance = dot(filter, W);

    if(luminance < 0.5)
      filter_result = 2. * filter * Color;
    else
      filter_result = Color;

    return filter_result;
  }

  vec3 ovelayBlender(vec3 Color, vec3 filter){
    vec3 filter_result;

    float luminance = dot(filter, W);

    if(luminance < 0.5)
      filter_result = 2. * filter * Color;
    else
      filter_result = 1. - (1. - (2. *(filter - 0.5)))*(1. - Color);

    return filter_result;
  }

  vec3 applyHue(vec3 Color, float h) {
    vec3 yColor = rgb2yiq * Color;
    float originalHue = atan(yColor.b, yColor.g);
    float finalHue = originalHue + (h);
    float chroma = sqrt(yColor.b*yColor.b+yColor.g*yColor.g);
    vec3 yFinalColor = vec3(yColor.r, chroma * cos(finalHue), chroma * sin(finalHue));
    return vec3(yiq2rgb*yFinalColor);
  }

  vec3 applyGray(vec3 Color, float g) {
    float gray = dot(Color, vec3(0.299, 0.587, 0.114));
    return mix(Color, vec3(gray, gray, gray), g);
  }

  vec3 applySepia(vec3 Color, float s) {
    float gray = dot(Color, vec3(0.299, 0.587, 0.114));
    return mix(Color, vec3(gray) * SEPIA, s);
  }


  void main() {
    vec2 st = uv.st;
    vec3 irgb = texture2D(tex, st).rgb;
    vec3 filter = texture2D(tex, st).rgb;

    vec3 bcs_result = BrightnessContrastSaturation(irgb, brightness, contrast, saturation);
    vec3 hue_result = applyHue(bcs_result, hue);
    vec3 sepia_result = applySepia(hue_result, sepia);
    vec3 gray_result = applyGray(sepia_result, gray);

    vec3 after_filter = mix(gray_result, multiplyBlender(gray_result, filter), mixFactor);

    gl_FragColor = vec4(after_filter, 1.);
  }
`
}
});

var Instagram = GL.createComponent(
({ brightness, saturation, contrast, hue, gray, sepia, mixFactor,   children, ...rest }) =>
<GL.View
{...rest}
shader={shaders.instagram}
uniforms={{ brightness, saturation, contrast, hue, gray, sepia, mixFactor }}>
<GL.Uniform name="tex">{children}</GL.Uniform>
</GL.View>
, { displayName: "Instagram" });

module.exports = photoScreen

---

你要找的东西在屏幕上没有这个.props.image吗？没有，没有用。我正在尝试将第一个屏幕上所选图像的uri传递到第二个屏幕。我太困了，如果您已解决问题，请更新