我的代码没有给我预期的设计

Question

我想制作提要屏幕，这是每个帖子项目的我想要实现的目标。 这是我目前拥有的。我认为这可以完成工作。我是否在某个地方犯了错误，或者我需要在样式中添加其他内容？我在设计上遇到了困难，并认为这足以构建组件。例如，我期望图像是顶部元素，但不知何故它位于中间......另外，当我遇到此类问题时，如何应对它们，有什么建议吗？

        <View style={styles.wrapper}>
         <Opacity onPress={props.onPostSelect}>
           <View style={{ ...styles.postContainer, ...props.style }}>
             {/* thumbnail  */}
             <View style={styles.thumbnailContainer}>
               <Image
                 resizeMode="contain"
                 source={{ uri: props.item.thumbnailURL }}
                 style={styles.thumbnail}
               />
             </View>
             {/* thumbnail end*/}

             {/* info container */}
             <View style={styles.infoContainer}>
               <View style={styles.postDetailsContainer}>
                 {/* //TITLE */}
                 <View style={styles.title}>
                   <Text style={styles.text} numberOfLines={1}>
                     {props.item.title}
                   </Text>
                 </View>
                 {/* //TITLE end*/}

                 {/* LIKES/VIEWS */}
                 <View style={styles.likesAndViewsContainer}>
                   <Text style={styles.text}>{props.item.views} views | </Text>
                   {/* LIKES */}
                   <View style={styles.likesContainer}>
                     <MaterialIcons name="thumb-up" color="white" size={18} />
                     <Text style={styles.text}> {props.item.likes} </Text>
                   </View>
                 </View>
               </View>
             </View>
           </View>
         </Opacity>
       </View>

风格：

     const styles = StyleSheet.create({
      postContainer: {
        justifyContent: "center",
        borderWidth: 7,
        borderColor: "brown",
        borderRadius: 2,
        backgroundColor: "pink",
        marginHorizontal: 5,
        height: "95%",
        overflow: "hidden",
        flexDirection: "column",

        justifyContent: "center",
        alignItems: "center",
      },
      wrapper: {
        flex: 1,
        flexGrow: 1,
        height: 500,
        width: "100%",
        backgroundColor: Colors.secondaryColors.lightGray,
        overflow: "hidden",
      },
      title: {
        flexDirection: "column",
        color: "white",
        height: "80%",
      },
      likesAndViewsContainer: {
        flexDirection: "row",
        justifyContent: "flex-start",
        overflow: "hidden",
      },
      text: {color:black},
      likesContainer: {
        flexDirection: "row",
      },
      thumbnail: {
        flex: 1,
        width: 100,
        height: "100%",
        position: "absolute",
      },
      thumbnailContainer: {
        flex: 1,
        height: "100%",
        width: "100%",
        marginVertical: 10,
        position: "absolute",
        right: 10,
        left: 10,
      },
      infoContainer: {
        flexDirection: "row",
      },
      postDetailsContainer: {
        color: "white",
        fontSize: 16,
      flexDirection: "column",
      },
    });

Answer 1

我认为这与您的 position:'absolute' 和 flex:1 有关。
我已经把它清理了一下，请告诉我，这是否是您想要的

<View style={styles.wrapper}>
      <View style={styles.postContainer}>
        <View style={styles.thumbnailContainer}>
          <Image
            resizeMode="contain"
            source={{ uri: props.item.thumbnailURL }} 
            style={styles.thumbnail}
          />
        </View>
        <View style={styles.infoContainer}>
          <Text style={styles.text} numberOfLines={1}>{props.item.title}</Text>
          <View style={styles.likesAndViewsContainer}>
            <Text style={styles.text}>{props.item.view} views | </Text>
            <View style={styles.likesContainer}>
              <MaterialIcons name="thumb-up" color="white" size={18} />
              <Text style={styles.text}> {props.item.likes} </Text>
            </View>
          </View>
        </View>
      </View>
    </View>

样式：

const styles = StyleSheet.create({
  postContainer: {
    borderWidth: 1,
    borderColor: "brown",
    backgroundColor: "pink",
    padding:15,
  },
  wrapper: {
    flex:1,
    backgroundColor: 'gray',
  },
  likesAndViewsContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
  },
  text: {
    color:'black',
    marginBottom:15,
    fontWeight:'bold',
    },
  likesContainer: {
    flexDirection: "row",
  },
  thumbnailContainer:{
    height: 100,
    width:100,
    borderWidth:1,
    alignSelf:'center',

  },
  thumbnail: {
    height: 100,
    width:100,
  },
  infoContainer: {
    marginTop:15,
  },
     
});