定义ReactNative复合组件的类型

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

// 子组件
const SubComponent = ({ text }) => <Text style={styles.subText}>{text}</Text>;

// 复合组件
const CompositeComponent = ({ title, content }) => (
  <View style={styles.container}>
    <Text style={styles.title}>{title}</Text>
    <SubComponent text={content} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f0f0f0',
    borderRadius: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subText: {
    fontSize: 16,
  },
});

export default CompositeComponent;

const CompositeComponent = ({ title, content }) => (
  <View style={styles.container}>
    <Text style={styles.title}>{title}</Text>
    <SubComponent text={content} /> {/* 确保这里正确传递了props */}
  </View>
);

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

const CompositeComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>{count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};