responsive-design - 如何响应本地文本和图像响应？小型设备中的较小文本和图像，大型设备中的较大文本和图像

如何响应本地文本和图像响应？

我只知道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-direction的column，因此，如果您希望水平放置内容，则必须将其显式设置为row。