探索响应式设计新天地：Uranium —— React与React Native的CSS-in-JS媒体查询解决方案

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
 
// 定义媒体查询
const mediaQueries = {
  phone: {
    orientation: 'portrait',
    styles: {
      textColor: 'blue',
      fontSize: 16,
    },
  },
  tablet: {
    orientation: 'landscape',
    styles: {
      textColor: 'green',
      fontSize: 20,
    },
  },
};
 
// 使用媒体查询定义样式
const styles = StyleSheet.create({
  text: {
    ...mediaQueries.phone.styles,
    [mediaQueries.tablet.orientation]: {
      ...mediaQueries.tablet.styles,
    },
  },
});
 
export default function App() {
  return (
    <View>
      <Text style={styles.text}>Responsive Text</Text>
    </View>
  );
}

这个例子展示了如何在React Native应用中使用CSS-in-JS的方式来定义响应式的文本样式。通过媒体查询对象，我们定义了针对手机和平板的不同样式，并在styles中使用了它们。在实际的设备上测试时，文本会根据设备的方向和类型显示不同的颜色和字号。这是一个简单的例子，展示了如何将媒体查询应用于React Native应用的样式定义中。