响应式设计 – 如何响应原生文本和图像的响应？较小的设备中较小的文本和图像,较大的设备中较大的文本和图像

2023年10月9日 214次阅读

如何反应原生文本和图像的响应？

我只知道Flexbox可以使布局响应,但似乎无法应用于文本和图像.

例如,在iphone 4s中将我的文字和图像缩小,在iphone 6中更大

谢谢.

最佳答案 您可以使用Flexbox以使您的应用程序响应.

例如,假设您想在同一行显示一行文本和图像：

class ResponsiveExample extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>
                    Example of centered text
                </Text>
                <Image
                    resizeMode={"contain"}
                    style={styles.image}
                    source={{uri: "your image"}}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between"
    },
    text: {
        marginLeft: 20,
        flex: 1
    },
    image: {
        marginRight: 20,
        height: 400,
        flex: 3,
    }
});

现在,文本和图像将相对于屏幕大小显示.这里通常的挂起是flexDirection默认为column,这会使事物垂直排列.你可以看到当我们从纵向转向横向时会发生什么：

《响应式设计 – 如何响应原生文本和图像的响应？较小的设备中较小的文本和图像,较大的设备中较大的文本和图像》

如您所见,文本和图像响应方向的变化.

为了更好地概述Flexbox,我想参考以下指南：
 https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

请记住,React Native默认为列的flex方向,因此如果您想要水平布局,则必须将其显式设置为row.

点赞