React native 如何使用样式化组件设置React Native中最后一个子级的样式

如何使用样式化组件设置React Native中最后一个子级的样式

它不起作用：

&:last-child {
   border-bottom-width: ${normalize(1.5, true)};
   border-bottom-color: ${p => p.theme.RED};
}

下面是一个示例代码，我想在其中添加（边框底色），除了最后一个子项

export const ListItem = styled.TouchableOpacity`
  ${props =>
    props.border &&
    `
    border-bottom-width: ${normalize(1.5, true)};
    border-bottom-color: ${props.theme.UI_LIST_COLOR};
  `};

  padding: ${s(2, 14, 1)};
`;

---

有人能帮我吗？提前谢谢

我不确定您的完整设置，也不确定您的道具对象的详细信息，但这里有一个简单的工作示例，可以为您的实现提供一些指导

const ListItem=styled.li`
${props=>props.border&&`
边框底部：实心；
边框底宽：3倍；
边框底色：${props.theme.UI\u LIST\u color}；
&：最后一个孩子{
边框底宽：6px实心；
边框底色：${props.theme.RED}；
}
`}
`;
函数应用程序（{list}）{
const-theme={UI\u-LIST\u-COLOR:'blue'，RED:'RED'}
const listItems=list.map（（项）=>
{item}
);
报税表（

{listItems}

);
}
常量样本列表=['LI 1'，'LI 2'，'LI 3'，'LI 4']
ReactDOM.render（，document.getElementById（'root'）

在github上共享您的代码，我会提供帮助you@AmirDoreh谢谢你的回答！我不能共享我的所有代码，因为这是禁止的。我只能显示部分代码。是的，谢谢你的回答，它是React，我需要React Native，例如（FlatList）。啊，是的，我现在看到了。您遇到的问题是React Native在其组件中使用了大量嵌套，这常常导致每个元素都是其深度嵌套父元素的最后一个子元素。我建议只利用React Native提供的相当强大的样式选项。例如，您可以从
FlatList
访问
renderItem
的索引，并使用它有条件地设置最后一项的样式：
const renderItem=（{item，index}）=>{const borderBottom=index==DATA.length-1？“1px实心红色”：“1px实心蓝色”…
下面是使用。