React Native/查找并应用平面背景色的第n个子对象？

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

const BackgroundColorComponent = ({ children, backgroundColor, n }) => {
  const childArray = React.Children.toArray(children);
  const nthChild = childArray[n - 1];

  return (
    <View style={{ backgroundColor }}>
      {React.cloneElement(nthChild, { style: { flex: 1 } })}
    </View>
  );
};

const App = () => {
  return (
    <BackgroundColorComponent backgroundColor="blue" n={3}>
      <View style={{ backgroundColor: 'red' }} />
      <View style={{ backgroundColor: 'green' }} />
      <View style={{ backgroundColor: 'yellow' }} />
    </BackgroundColorComponent>
  );
};