如何反应原生文本和图像的响应？较小的设备中较小的文本和图像，较大的设备中较大的文本和图像

Question

如何对原生文字和图片作出反应？

我只知道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

Answer 2

我认为react-native-fit-image对您有用。

  

使用React Native Fit Image可以绘制响应式图像组件。

您可以使用此组件，如下所示。

<FitImage source={{ uri: 'http://facebook.github.io/react/img/logo_og.png' }} style={styles.fitImage} />

Answer 3

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