如何实现商家营业时间水平轴对齐（仿Google搜索展示效果）

Hey there! Using spaces to align your business hours is a common quick fix, but it falls apart on mobile because different fonts, screen sizes, and even text lengths mess with whitespace rendering. Let's swap that out for a reliable layout approach that matches Google's clean, consistent horizontal alignment.

The Problem with Spaces #

Spaces rely on fixed character widths, which don't hold up across devices. A space that looks perfect on desktop might collapse or cause weird wrapping on mobile, leading to the messy layout you're seeing.

Solution: Use Flexbox Layout (React Native) #

Since your code uses React Native <Text> components, we'll leverage flexbox to create responsive, aligned rows of hours. This ensures consistency across all screen sizes.

Step 1: Define Styles

First, update your styles to create a flexible container and consistent hour items:

const styles = StyleSheet.create({
  hoursContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 16, // Controls spacing between hour items (adjust to match Google's look)
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  hourItem: {
    width: '48%', // Shows 2 items per row on mobile; adjust to 32% for 3 items/row
    minWidth: 160, // Prevents items from getting too narrow on small screens
    flexDirection: 'row',
    justifyContent: 'space-between', // Aligns day label left, time right (Google-style)
  },
  dayLabel: {
    fontWeight: '600', // Bold day names like Google
    color: '#202124',
  },
  hourText: {
    color: '#5f6368', // Gray time text to match Google's subtle style
  },
});

Step 2: Update Your Component

Replace your existing <Text> chain with this structured layout:

<View style={styles.hoursContainer}>
  <View style={styles.hourItem}>
    <Text style={styles.dayLabel}>Monday:</Text>
    <Text style={styles.hourText}>{selectedbusiness.monday}</Text>
  </View>
  <View style={styles.hourItem}>
    <Text style={styles.dayLabel}>Tuesday:</Text>
    <Text style={styles.hourText}>{selectedbusiness.tuesday}</Text>
  </View>
  <View style={styles.hourItem}>
    <Text style={styles.dayLabel}>Wednesday:</Text>
    <Text style={styles.hourText}>{selectedbusiness.wednesday}</Text>
  </View>
  <View style={styles.hourItem}>
    <Text style={styles.dayLabel}>Thursday:</Text>
    <Text style={styles.hourText}>{selectedbusiness.thursday}</Text>
  </View>
  <View style={styles.hourItem}>
    <Text style={styles.dayLabel}>Friday:</Text>
    <Text style={styles.hourText}>{selectedbusiness.friday}</Text>
  </View>
  <View style={styles.hourItem}>
    <Text style={styles.dayLabel}>Saturday:</Text>
    <Text style={styles.hourText}>{selectedbusiness.saturday}</Text>
  </View>
  <View style={styles.hourItem}>
    <Text style={styles.dayLabel}>Sunday:</Text>
    <Text style={styles.hourText}>{selectedbusiness.sunday}</Text>
  </View>
</View>

Why This Works #

• Flex Wrap: Automatically moves items to a new row when the screen runs out of space, so no messy overflow on mobile.
• Fixed Item Width: Each hour entry takes up a consistent percentage of the screen, ensuring alignment no matter the device.
• Justify Content: The space-between rule pushes the day label and time to opposite ends of each item, mirroring Google's clean, organized look.

You can tweak the width value in hourItem to adjust how many items fit per row (e.g., 33% for 3 items on larger screens) and adjust the gap to match Google's spacing exactly.

内容的提问来源于stack exchange，提问作者Michael