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

import React from 'react';
import { View, StyleSheet } from 'react-native';

const StyledComponent = ({ children }) => {
  const lastChildIndex = React.Children.count(children) - 1;
  
  return (
    <View style={styles.container}>
      {React.Children.map(children, (child, index) => {
        const isLastChild = index === lastChildIndex;
        const childStyle = isLastChild ? styles.lastChild : null;
        
        return React.cloneElement(child, { style: [child.props.style, childStyle] });
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  lastChild: {
    // 设置最后一个子项的样式
    // 可以设置背景色、边框、间距等
  },
});

const App = () => {
  return (
    <StyledComponent>
      <View style={styles.child1} />
      <View style={styles.child2} />
      <View style={styles.child3} />
    </StyledComponent>
  );
};

const styles = StyleSheet.create({
  child1: {
    // 子项1的样式
  },
  child2: {
    // 子项2的样式
  },
  child3: {
    // 子项3的样式
  },
});