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

我是一个新的本地人。我想要的是，在我的应用程序中，每个菜单中都有许多图像。当我单击图像时，我希望以屏幕大小查看图像。问题是，当我单击每个图像时，我希望它指向单个页面，并从那里调用图像。如何将图像变量从不同页面传递到单个页面页面..迄今为止的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键