React Native结合TailwindCSS：设置flex-grow后元素不显示？

核心问题 #

1. 空元素无基础尺寸：你的TouchableOpacity没有任何子元素，在React Native中，flex容器内的元素如果没有内容且未设置最小尺寸，就算加了flex-grow也无法渲染出可见区域——元素没有可扩展的“基础载体”。
2. 父容器布局属性冲突：父View同时使用了justify-between和flex-row，这个属性会强制把剩余空间分配到元素间隙，和你“选中元素占据剩余空间”的需求冲突，直接导致flex-grow失效。

修复后的代码 #

<View className="flex flex-row mx-6 my-4 space-x-2">
  <TouchableOpacity
    onPress={() => setCurrentAction("optionOne")}
    className={
      currentAction === "optionOne"
        ? "h-10 flex-grow min-w-10 rounded-md bg-blue-200"
        : "h-10 w-10 rounded-md bg-blue-200"
    }
  ></TouchableOpacity>
  <TouchableOpacity
    onPress={() => setCurrentAction("optionTwo")}
    className={
      currentAction === "optionTwo"
        ? "h-10 flex-grow min-w-10 rounded-md bg-red-200"
        : "h-10 w-10 rounded-md bg-red-200"
    }
  ></TouchableOpacity>
  <TouchableOpacity
    onPress={() => setCurrentAction("optionThree")}
    className={
      currentAction === "optionThree"
        ? "h-10 flex-grow min-w-10 rounded-md bg-green-200"
        : "h-10 w-10 rounded-md bg-green-200"
    }
  ></TouchableOpacity>
</View>

关键修改说明 #

• 移除父容器的justify-between：让flex-grow负责分配剩余空间，配合space-x-2维持元素间的固定间隙，避免布局逻辑冲突。
• 给选中元素加min-w-10：为空元素设置基础宽度，确保即使没有内容也能渲染出可见区域，同时flex-grow会让它在基础宽度之上占据所有剩余空间。

额外优化提示 #

如果后续要在按钮内添加图标或文字，可直接去掉min-w-10——内容会提供内在尺寸，flex-grow就能正常生效。

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