Question

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

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作为道具值传递给AddFilter组件。

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

想要在reactNative的其他组件中显示选定的图像

1 个答案: