React Native如何修改最后一个折叠项样式：展开时移除其下边框（不使用第三方库）

Great question! Since React Native doesn’t support CSS pseudo-selectors like :last-of-type, we need a component-driven approach to handle this requirement—no third-party libraries needed. Here are two reliable methods to achieve what you want:

Method 1: Automated Handling via Parent Component (Dropdown) #

This approach is ideal if you’re using the Dropdown component to wrap your ColapseItems. We’ll modify the parent to detect the last child and pass a prop to it, then adjust the style based on the item’s expanded state.

Step 1: Update the Dropdown Component #

Modify the Dropdown to iterate over its children, identify the last one, and pass an isLast prop:

export function Dropdown({ children }) {
  // Convert children to an array to handle single elements or dynamic lists
  const childElements = React.Children.toArray(children);

  return (
    <View>
      {childElements.map((child, index) => {
        const isLast = index === childElements.length - 1;
        // Clone the child component and inject the isLast prop
        return React.cloneElement(child, { isLast });
      })}
    </View>
  );
}

Step 2: Adjust the ColapseItem Component #

Update ColapseItem to accept the isLast prop, then conditionally remove the bottom border when the item is the last one and expanded:

export function ColapseItem({ 
  title, 
  children, 
  collapsedByDefault = true, 
  isLast = false 
}) { 
  const [isCollapsed, setIsCollapsed] = React.useState(collapsedByDefault); 

  function onToggle() { 
    setIsCollapsed(prev => !prev); 
  } 

  // Build dynamic style: remove border if last item and expanded
  const containerStyle = [
    itemStyles.container,
    isLast && !isCollapsed && { borderBottomWidth: 0 }
  ];

  return ( 
    <View> 
      <Pressable style={containerStyle} onPress={onToggle}> 
        <Text>{title}</Text> 
        <Icon size={14} name='icon1' /> 
      </Pressable> 
      {!isCollapsed && <View style={itemStyles.collapsibleItem}>{children}</View>} 
    </View> 
  ); 
}

Method 2: Manual Prop Assignment (For Static Lists) #

If you’re rendering a fixed set of ColapseItems without using the Dropdown wrapper, you can directly pass the isLast prop to the final item:

Usage Example: #

<ColapseItem title="Label"> 
  <Text>children</Text> 
</ColapseItem> 
<ColapseItem title="Label"> 
  <Text>children</Text> 
</ColapseItem> 
<ColapseItem title="Label" isLast> 
  <Text>children</Text> 
</ColapseItem>

This works perfectly for static content where you know which item is last upfront.

Key Notes: #

• Both methods rely on conditional styling instead of CSS pseudo-selectors, which aligns with React Native’s style system.
• The border is only removed when the last item is expanded (!isCollapsed), which matches your original requirement.

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