如何响应本机文本和图像？小型设备中的较小文本和图像，大型设备中的较大文本和图像

Question

如何反应本机文本和图像响应？

我只知道Flexbox可以使布局响应，但似乎不能应用于文本和图像。

e、 g.让我的文字和图像在iphone 4s中变小，在iphone6中变大

谢谢

Answer 1

考虑Flexbox是正确的，只需将文本和图像包装在View中，并使这些View flexbox具有响应性。

Answer 2

我觉得react-native-fit-image对你有用。

“响应本机适合图像”使您能够绘制响应式图像组件。

您可以按如下方式使用此组件。

<代码>

Answer 3

您可以使用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,
    }
});

现在，文本和图像将根据屏幕大小显示。这里通常的问题是< code>flexDirection默认为< code>column，这将使事情垂直排列。你可以看到当我们从纵向翻转到横向时会发生什么:

如您所见，文本和图像会响应方向的变化。

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

请记住，React Native默认为< code>column的< code>flex-direction，因此如果您希望水平布局，您必须显式地将其设置为< code>row。