想要在反应原生的另一个组件中显示选定的图像

Question

我有一个问题，我从手机图库中选择了一张图片，但现在我想将它传递给其他组件，我该如何实现？ 我在这个组件中有一个名为画廊的组件我从我的手机画廊渲染图像。然后我可以从画廊中选择任何一个图像当我选择一个图像时我想将它发送到另一个名为 APPLYFILTER 的组件 这是我的名为画廊的组件代码，我也使用它从画廊获取图像

import React, { Component } from "react";
 import { TouchableOpacity,StatusBar,View,Modal, 
    TouchableHighlight,StyleSheet,Image } from "react-native";
 import { connect } from "react-redux";

  import { DrawerNavigator, NavigationActions } from "react-navigation";
    import {Icon} from 'react-native-elements';

 import {
 Container,
 Header,
 Title,
 Content,
 Text,
 Button,

 Left,
 Body,
 Right,
 List,ListItem,Thumbnail,Footer,FooterTab
 } from "native-base";
   import { Grid, Row } from "react-native-easy-grid";
  import CameraRollPicker from 'react-native-camera-roll-multi-picker';


 export default class Search extends Component {
  static navigationOptions = {
  header: null
  }
       constructor(props) {
super(props);
this.state = {
  pickedImage:null,
  num:0,
  selectSingleItem:true,
  images:[],
};
}
 getSelectedImages(images){


  let image = images.length > 0 ? images[images.length-1] : null;
this.setState({pickedImage:image, images:images,num:images.length});

 }
addfilter()
{
if(this.state.num>0)
{
  this.props.navigation.navigate('AddFilter');
}
else{
  alert('Please select a image');
}
 }


 render() {
  return (
  <Container>
  <Header>
      <Left>
        <Button transparent active onPress={() 
       =>this.props.navigation.navigate('Home') }>

          <Text style={{color:'#000'}}>Cancel</Text>
        </Button>
      </Left>

      <Right>
        <Button transparent onPress={this.addfilter.bind(this) }>
          <Text style={{color:'#000'}}>Next</Text>
        </Button>
      </Right>
    </Header>
  <Content >
    <View style={{height:300,}}>
    <Image source={this.state.pickedImage} resizeMode={'stretch'}style={{ width: '100%', height:300 }}  />
      {/* {this.state.image} */}
    </View>
    <CameraRollPicker selectSingleItem='true'
        callback={this.getSelectedImages.bind(this)} />
  </Content>
  <Footer>
    <FooterTab>
      <Button  >
        <Text >Gallery</Text>


      </Button>
      <Button>
        <Text>Photos</Text>
      </Button>
      <Button >
        <Text>Videos</Text>
      </Button>

    </FooterTab>
  </Footer>
</Container>

);
 }
 }
 const styles = StyleSheet.create({
container:{
    flex: 1,
}
})

Answer 1

您可以将 Image 作为 props 值传递给 AddFilter 组件。

this.props.navigation.navigate('AddFilter',<Image Value>).