Question

我是新来的响应本机的人。我想要的是在我的应用中每个菜单中都有很多图像。当我单击图像时，我想以屏幕尺寸查看图像。问题是当我单击我希望将每个图像定向到单个页面并从那里调用图像..如何将不同页面的图像变量传递到单个页面..到目前为止，图像视图单页面渲染如下所示：当完成图像组件操作时，它仅查看第一张图像，而不查看其他图像。解决方案是什么？

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>
    );
  }
}

Answer 1

我认为这是一个样式问题，您有多个图像都试图填充100％

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

尝试使用flex或更改身高，如下所示：

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

反应本机传递的数据到其他屏幕

1 个答案: