时间戳

首页 > 解决方案 > 使图像适合视图反应原生

react-native - 使图像适合视图反应原生

问题描述

Image里面的上面有一个空隙View。我试图让它适合Image我的内部View

我的输出
我想要达到的目标

这是我的代码 

import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import THEME from '../../constants/theme.constants';
import SmallButton from './SmallButton';
import default_pp from '../../assets/default_pp.png';
import thumbnail_post from '../../assets/thumbnail_post.png';

function PostServiceProvider({user, ratings, rate, description}) {
  return (
    <View style={styles.container}>
      <View style={styles.headerPost}>
        <Image source={default_pp} style={styles.profilePicContainer} />
        <TouchableOpacity style={{marginLeft: 10}}>
          <Text style={styles.priceText}>{user}</Text>
        </TouchableOpacity>
        <View style={{position: 'absolute', right: 5}}>
          <Text>{ratings}</Text>
        </View>
      </View>
      <View style={styles.cardContainer}>
        <Image source={thumbnail_post} style={styles.thumbnailImg} />
        <View style={styles.rateContainer}>
          <Text style={styles.text}>Daily Rate: </Text>
          <Text style={styles.priceText}>Php 400</Text>
          <View style={styles.buttonContainer}>
            <SmallButton label="Hire" />
          </View>
        </View>
        <View style={styles.br} />
        <View style={{padding: 20}}>
          <Text numberOfLines={2} style={styles.text}>
            {description}
          </Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    borderRadius: 50,
    borderColor: 'transparent',
    marginTop: 20,
  },
  headerPost: {flexDirection: 'row', alignItems: 'center'},
  profilePicContainer: {
    height: 40,
    width: 40,
    borderRadius: 50,
    borderWidth: 1,
  },
  cardContainer: {
    width: '100%',
    flex: 1,
    borderColor: 'rgba(0,0,0,0.2)',
    borderRadius: 10,
    borderWidth: 0.5,
    marginTop: 10,
    alignItems: 'center',
  },
  thumbnailImg: {width: '100%', height: 300},
  rateContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    padding: 20,
  },
  buttonContainer: {width: '22%', position: 'absolute', right: 15},
  br: {height: 1, width: '90%', backgroundColor: 'rgba(0,0,0,0.1)'},
  text: {color: THEME.FONT_FADE},
  priceText: {fontWeight: 'bold', fontSize: 17},
});

export default PostServiceProvider;

标签： react-nativereact-native-stylesheet

解决方案

在图像组件中添加resizeMode="cover"道具，如下所示：

... your previous code
<View style={styles.cardContainer}>
        <Image source={thumbnail_post} style={styles.thumbnailImg} resizeMode="cover" />
... your rest of code

推荐阅读