React native 将本机数据传递到其他屏幕

React native 将本机数据传递到其他屏幕,react-native,React Native,我是一个新的本地人。我想要的是,在我的应用程序中,每个菜单中都有许多图像。当我单击图像时,我希望以屏幕大小查看图像。问题是,当我单击每个图像时,我希望它指向单个页面,并从那里调用图像。如何将图像变量从不同页面传递到单个页面页面..迄今为止的did图像查看单页渲染如下:,当图像组件这样做时,它只查看第一个图像,而不查看另一个。解决方案是什么 render() { this.state.incident = this.props.navigation.getParam('incidents','h

我是一个新的本地人。我想要的是,在我的应用程序中,每个菜单中都有许多图像。当我单击图像时,我希望以屏幕大小查看图像。问题是,当我单击每个图像时,我希望它指向单个页面,并从那里调用图像。如何将图像变量从不同页面传递到单个页面页面..迄今为止的did图像查看单页渲染如下:,当图像组件这样做时,它只查看第一个图像,而不查看另一个。解决方案是什么

render() {
 this.state.incident = this.props.navigation.getParam('incidents','hi!!');
    this.state.tenantattachedagreement = this.props.navigation.getParam('tenantattach','hi!!!')
    // this.state.residents = this.props.navigation.getParam('residents','');
    // this.state.tenantattachedagreement = this.props.navigation.getParam('attachedagreement','');
    // console.log("attached agreement",this.state.tenantattachedagreement);
    // incidents = this.props.navigation.getParam('incidents,'');
    // console.log("hello",attached);
    // console.log("l&f pic",this.state.lostfound);
    console.log("incidentpic",this.state.incident);
    console.log("tenantattach",this.state.tenantattachedagreement);

    // console.log("residents",this.state.residents);



    return (
       <View style={{flex:1}}>
             <StatusBar 
       barStyle = "light-content"
       hidden = {false}
       backgroundColor = "#32ACFD"
       translucent = {false}
       networkActivityIndicatorVisible = {true}
       /> 
        <View style={{flexDirection:'row',height:50,width:'100%',justifyContent:'center',alignItems:'center',backgroundColor:'#32ACFD',elevation:5,borderBottomWidth:1,borderColor:'#5b9bd5'}}>
             <TouchableOpacity onPress={()=>{this.props.navigation.goBack()}} style={{height:'100%',width:'12%',justifyContent:'center',alignItems:'center'}}>
               <Icon name="angle-left" style={{fontSize:25,color:'white'}}/>
             </TouchableOpacity>
             <TouchableOpacity onPress={()=>{this.props.navigation.navigate('DashBoard')}} style={{width:'33%',height:'100%',justifyContent:'center'}}>
               <Text style={{color:'white',fontSize:18,textShadowColor: 'grey',paddingLeft:'5%',fontWeight:'500',fontStyle:'normal',textShadowRadius:5,textShadowOffset: {width: -1, height: 1}}}>Smart Vitae</Text>
             </TouchableOpacity>
             <View style={{width:'35%',height:'100%',justifyContent:'center',alignItems:'center'}}>
                <Text style={{color:'white'}}>Unit: {this.state.unitname}</Text>
             </View>
             <TouchableOpacity onPress={()=>{this.props.navigation.navigate('Notification')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
                <Icon name="bell-o" style={{color:'white',fontSize:22}}/>
             </TouchableOpacity>
             <TouchableOpacity onPress={()=>{this.props.navigation.navigate('Settings')}} style={{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}}>
                 <Icon name="cog" style={{color:'white',fontSize:24}}/>
             </TouchableOpacity>
          </View>
        <View>
                <View style={{height:'100%',width:'100%',justifyContent:'center',alignItems:'center',borderColor:'#2E4053'}}>  

                              <Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>
                              <Image source={{uri:this.state.lostfound}} style={{height:'100%',width:'100%'}}></Image> 
                              <Image source={{uri:this.state.tenantattachedagreement}} style={{height:'100%',width:'100%'}}></Image> 
                              <Image source={{uri:this.state.incident}} style={{height:'100%',width:'100%'}}></Image>            
                </View>
        </View>                     

       </View>
    );
  }
}
render(){
this.state.incident=this.props.navigation.getParam('incidents','hi!!');
this.state.tenantattachedgreement=this.props.navigation.getParam('tenantattach','hi!!!'))
//this.state.residents=this.props.navigation.getParam('residents','');
//this.state.tenantattachedagreement=this.props.navigation.getParam('attachedagreement','');
//console.log(“随附协议”,this.state.tenantachedagreement);
//事件=this.props.navigation.getParam('事件');
//控制台日志(“你好”,附件);
//console.log(“l&f pic”,this.state.lostfound);
console.log(“incidentpic”,this.state.incident);
log(“tenantattach”,this.state.tenantattachedgreement);
//console.log(“居民”,this.state.residents);
返回(
{this.props.navigation.goBack()}}style={{{height:'100%,width:'12%,justifyContent:'center',alignItems:'center'}>
{this.props.navigation.navigate('DashBoard')}style={{{width:'33%',height:'100%',justifyContent:'center'}>
智能简历
单位:{this.state.unitname}
{this.props.navigation.navigate('Notification')}style={{{{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}>
{this.props.navigation.navigate('Settings')}style={{{{width:'10%',height:'100%',justifyContent:'center',alignItems:'center'}>
);
}
}

我认为这是一个造型问题,您有多张图片都试图100%填充

<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>

我相信这是一个造型问题,你有多张图片都试图填满100%

<Image source={{uri:this.state.residents}} style={{height:'100%',width:'100%'}}></Image>

thanx我正在查看所有图像,但它看起来似乎很小,如果我希望它位于屏幕高度,该怎么办。此外,它正在查看屏幕的一部分。您需要决定如何以全屏大小显示多个图像。如果你想让他们滚动,你应该在滚动视图中包装你的图像,或者更好地使用平面列表。只有该图像才应该在我们单击的图像上以全尺寸查看。因此是否需要平面视图或滚动视图?你可以尝试创建一个新的路线,使用100%的单个图像,然后,您可以将单击图像的uri传递到此新路由。这样,当用户想要选择下一幅图像时,可以按back键。我正在查看所有图像,但它看起来似乎很小,如果我想在屏幕高度显示它,该怎么办。此外,它是查看屏幕的一部分。您需要决定如何以全屏大小显示多幅图像。如果你想让他们滚动,你应该在滚动视图中包装你的图像,或者更好地使用平面列表。只有该图像才应该在我们单击的图像上以全尺寸查看。因此是否需要平面视图或滚动视图?你可以尝试创建一个新的路线,使用100%的单个图像,然后,您可以将单击图像的uri传递到此新路由。这样,用户可以在想要选择下一幅图像时按back键