React-native将组件添加到数组并访问它们

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

// 自定义组件
const MyComponent = ({ text }) => {
  return <Text style={styles.text}>{text}</Text>;
};

const App = () => {
  // 组件数组
  const componentsArray = [
    <MyComponent key="1" text="Component 1" />,
    <MyComponent key="2" text="Component 2" />,
    <MyComponent key="3" text="Component 3" />
  ];

  return (
    <View style={styles.container}>
      {componentsArray}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    marginVertical: 8,
    fontSize: 18,
  },
});

export default App;

const componentsArray = [
  <MyComponent key="1" text="Component 1" />,
  <MyComponent key="2" text="Component 2" />,
  <MyComponent key="3" text="Component 3" />
];

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    marginVertical: 8,
    fontSize: 18,
  },
});