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

Question

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

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

例如，让我的文字和图像在 iphone 4s 中变小，在 iphone 6 中变大

谢谢。

Answer 1

您可以使用 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 .