我有一个react-native 应用程序,可以从api获取数据

这是每个项目的类别:

import React, { Component } from "react"
import { View, Image, Text, StyleSheet } from "react-native"

export default class Item extends Component {
    render() {
        let { item } = this.props;
        const { subject, picture, details } = item;
        return (
            <View style={styles.container}>
                <Image style={styles.picture} resizeMode="cover" source={{ uri: picture }} />
                {console.log(image)}

                <View style={styles.content}>
                    <Text style={styles.subject}>{subject}</Text>
                    <Text style={styles.details}>{details}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 300,
        flexDirection: "row",
        flex: 1,
        padding: 10
    },
    content: {
        flexDirection: "column",
        flex: 1
    },
    picture: {
        height: 70,
        width: 100
    },
    subject: {
        marginLeft: 20,
        fontSize: 16,
        fontWeight: 'bold'
    },
    details: {
        marginLeft: 20,
        fontSize: 16,
    }
})

推荐答案

跳过为容器指定高度,您将拥有动态所需的高度,并从图像中删除高度,以便根据呈现的文本占据最终容器高度的高度.

您的样式表应该如下所示:

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        //flex: 1, - remove this as this doesn't make any sense here.
        padding: 10
    },
    content: {
        flexDirection: "column",
        flex: 1,
        paddingLeft: 10, //if you need separation.
    },
    picture: {
        //height: 70, - commenting this will make it automatically ataining height as per your text grows.
        width: 100
    },
    subject: {
        marginLeft: 20,
        fontSize: 16,
        fontWeight: 'bold'
    },
    details: {
        marginLeft: 20,
        fontSize: 16,
    }
})

React-native相关问答推荐

使用NextJS映射从数组中提取用户角色

Redux toolkit通过按钮操作进行查询

有人可以帮我实现 Font.loadAsync

使用 React Native 下载数据文件以供离线使用

React Native - remount / reset / reload屏幕的最佳方式是什么?

React 从 babel 6 到 babel 7 的原生升级

React Native 转换与枢轴点

react-native 中的layout-only view removal优化是什么?

错误:安装 react-native-elements 后无法识别字体系列 Material Design 图标?

React native - 创建单例模式的最佳方式

Unexpected token on "export default const"

带有父 PanResponder 的 TouchableOpacity

使用 React Navigation 导航堆栈时重新渲染组件

React Native:如何将 的高度和宽度设置为 容器?

尽管 TypeScript 编译器错误,为什么我的 React Native 应用程序构建成功?

在 ReactNative 中单击按钮时如何获取 TextInput 中的值

react-native如何导入元素根目录?

react-native构建错误:package android.support.annotation does not exist

为什么我收到警告:函数作为 React 子级无效?

React Navigation获取堆栈标题高度