expo 中 calc()的替代写法

在 Expo 中，如果你不想使用 `calc()` 函数，也可以使用 `Dimensions` API 来计算组件的尺寸。`Dimensions` API 可以帮助你获取设备的宽度和高度，从而进行计算。

以下是一个使用 `Dimensions` API 计算组件宽度的例子：

import React from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';

export default function App() {
  const { width } = Dimensions.get('window');
  const boxWidth = (width - 20) / 2;

  return (
    <View style={styles.container}>
      <View style={[styles.box, { width: boxWidth }]} />
      <View style={[styles.box, { width: boxWidth }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
    paddingHorizontal: 10,
  },
  box: {
    height: 100,
    backgroundColor: '#f00',
    marginHorizontal: 5,
  },
});

在这个例子中，我们使用 `Dimensions` API 获取屏幕宽度，并计算出两个盒子的宽度。我们通过减去 20 个像素（两个盒子的间距）来计算每个盒子的宽度，然后将其除以 2。

这种方法的缺点是需要手动计算组件的尺寸，比较繁琐，而且可能不够灵活。因此，如果你需要实现复杂的响应式设计，建议还是使用 `calc()` 函数。