как стилизовать изображения разной высоты в реакции - PullRequest
Новая
       22

как стилизовать изображения разной высоты в реакции

0 голосов
/ 18 апреля 2019

Я хочу стилизовать изображения разной высоты.Эти изображения хранятся в массиве.Я использовал плоский список, чтобы показать изображения. 

<FlatList 
    data={this.props.category}
    renderItem={({item}) =>{
        Image.getSize(item.imagepath, (srcWidth, srcHeight)=>{
        const maxHeight = Dimensions.get('window').height;
        const maxWidth = Dimensions.get('window').width;
        const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
        this.setState({width:srcWidth*ratio, height:srcHeight*ratio})
        })  
        return(
           <View>
           { this.state.width && this.state.height ?( 
               <Card style={styles.fullCard}>
               <Image 
                   source={{uri:item.imagepath}} 
                   style={{width:this.state.width, height:this.state.height}} 
                 />
                </Card>):(null)
            }
            </View>
            )
        }
    }
/>

Я хочу эти изображения в соответствии с их длиной.Он должен автоматически настроить себя.

1 Ответ

0 голосов
/ 18 апреля 2019

Это сработало для меня, используя плагин Reaction-native-Auto-Height-Image. Он принимает всю высоту сам по себе. Единственная проблема, которую он создал, была для ширины. 

<FlatList 
    data={props.category}
    renderItem={({item}) =>{
        const maxWidth = Dimensions.get('window').width;
        return(
            <Card style={styles.fullCard}>
            <AutoHeightImage source={{uri:item.imagepath}} width={maxWidth-20}/>
            </Card>
        )
        }
    }
/>

Я решил проблему ширины, используя размеры устройства.

...