React Native中如何让RideCard在横向布局下占满剩余宽度

我刚接触CSS相关技术，掌握的知识不多。现在遇到一个React Native组件宽度设置的问题：希望在保留MonthBody.js中oneDayContainer的flexDirection: row布局的前提下，让RideCard.js中的每个卡片组件在DateDay.js组件旁边占满剩余宽度。我尝试过width: '100%'但无效。组件嵌套关系为：MonthBody > DateDay + RideList > RideCard。

相关组件代码 #

MonthBody.js #

import { StyleSheet } from "react-native";
import { View } from "react-native";
import { useFirestoreContext } from "../../contexts/FirestoreContext";
import { DateDay } from "./DateDay";
import { RideList } from "./RideList";


export const MonthBody = ({ monthYear }) => {

  const { rides } =
      useFirestoreContext();

  return (
    <View style={styles.monthBodyContainer}>
      {Object.keys(rides[monthYear]).map((dateDay, j) => {
        return (
          <View style={styles.oneDayContainer}>
            <DateDay dateDay={dateDay} />
            <RideList monthYear={monthYear} dateDay={dateDay}  />
          </View>
        );
      })}
    </View>
  );
}



const styles = StyleSheet.create({
  monthBodyContainer: {
    display: "flex",
    flexDirection: "column",
  },
  oneDayContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "flex-start",
  },
});

DateDay.js #

import { StyleSheet, Text, View } from "react-native";

export const DateDay = ({dateDay}) => {
  return (
    <View style={styles.dateDayContainer}>
      <Text style={styles.dayText}>{dateDay.split("-")[1]}</Text>
      <Text style={styles.dateText}>{dateDay.split("-")[0]}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  dateDayContainer: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    width: 50,
    marginRight: 20,
    marginTop: 10,
  },
  dateText: {
    fontSize: 16,
    textAlign: "center",
  },
  dayText: {
    fontSize: 12,
    textAlign: "center",
  },
});

RideList.js #

import { StyleSheet, Text, View } from "react-native";
import { COLOR } from "../../assets/variables";
import { useFirestoreContext } from "../../contexts/FirestoreContext";
import { RideCard } from "./RideCard";
export const RideList = ({ monthYear, dateDay }) => {
  const { rides } = useFirestoreContext();

  return (
    <View style={styles.rideList}>
      {rides[monthYear][dateDay].map((ride, k) => {
        return <RideCard key={k} ride={ride} />;
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  rideList: {
    marginBottom: 5,
  },
});

RideCard.js #

import { StyleSheet, Text, View } from "react-native";
import { COLOR } from "../../assets/variables";

export const RideCard = ({ ride }) => {
  console.log("RideCard", ride);
  return (
    <View
      style={[
        styles.container,
        ride.boardType === "NEED"
          ? { backgroundColor: COLOR.lightGreen, borderWidth: .3, borderColor: COLOR.green }
          : { backgroundColor: COLOR.lightBlue, borderWidth: .3, borderColor: COLOR.blue },
      ]}
    >
      <View style={styles.places}>
        <Text style={styles.placeText}>{ride.cityFrom}</Text>
        <Text> - </Text>
        <Text style={styles.placeText}>{ride.cityTo}</Text>
      </View>
      <View>
        <Text style={styles.dateText}>
          {ride.leavingHour}:{ride.leavingMinutes}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    marginBottom: 5,
    borderRadius: 10,
  },
  places: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 5,
  },
});

解决方案 #

修改步骤 #

1. 更新RideList的样式：给rideList添加flex: 1，让它占据oneDayContainer中DateDay之外的剩余水平空间：

// RideList.js
const styles = StyleSheet.create({
  rideList: {
    marginBottom: 5,
    flex: 1, // 新增此行
  },
});

2. 更新RideCard的容器样式：给container添加width: '100%'，让卡片撑满父容器的宽度：

// RideCard.js
const styles = StyleSheet.create({
  container: {
    padding: 10,
    marginBottom: 5,
    borderRadius: 10,
    width: '100%', // 新增此行
  },
  places: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 5,
  },
});

原理说明 #

• oneDayContainer是横向flex布局，DateDay有固定宽度50，给RideList设置flex:1后，它会自动填充容器内剩下的所有水平空间。
• RideCard设置width: '100%'后，会完全撑满父组件RideList的宽度，最终实现卡片在DateDay旁边占满剩余空间的效果。

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