核心组件

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

function Container() {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    padding: 20
  },
  box1: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
  box2: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    marginLeft: 10
  }
});

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

function TextDemo() {
  return (
    <>
      <Text style={styles.title}>标题</Text>
      <Text style={styles.content}>
        这是一段文本内容
      </Text>
      <Text numberOfLines={2}>
        这是一段很长的文本，超过两行会被截断...
      </Text>
    </>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333'
  },
  content: {
    fontSize: 16,
    lineHeight: 24,
    color: '#666'
  }
});

import { Image, StyleSheet } from 'react-native';

function ImageDemo() {
  return (
    <>
      {/* 本地图片 */}
      <Image
        source={require('./assets/logo.png')}
        style={styles.image}
      />

      {/* 网络图片 */}
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={styles.image}
        resizeMode="cover"
      />
    </>
  );
}

const styles = StyleSheet.create({
  image: {
    width: 200,
    height: 200,
    borderRadius: 10
  }
});

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

function ScrollDemo() {
  return (
    <ScrollView
      style={styles.container}
      showsVerticalScrollIndicator={false}
      refreshControl={<RefreshControl refreshing={false} onRefresh={() => {}} />}
    >
      {[...Array(20)].map((_, i) => (
        <View key={i} style={styles.item}>
          <Text>Item {i + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  }
});

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

function ListDemo() {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: String(i),
    title: `Item ${i + 1}`
  }));

  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      ListHeaderComponent={() => <Text style={styles.header}>列表头部</Text>}
      ListFooterComponent={() => <Text style={styles.footer}>列表底部</Text>}
      onEndReached={() => console.log('加载更多')}
      onEndReachedThreshold={0.5}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 20,
    backgroundColor: '#fff'
  },
  separator: {
    height: 1,
    backgroundColor: '#eee'
  },
  header: {
    padding: 20,
    fontSize: 18,
    fontWeight: 'bold'
  },
  footer: {
    padding: 20,
    textAlign: 'center',
    color: '#999'
  }
});

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

function SectionDemo() {
  const sections = [
    {
      title: 'A',
      data: ['Alice', 'Amy']
    },
    {
      title: 'B',
      data: ['Bob', 'Bill']
    }
  ];

  return (
    <SectionList
      sections={sections}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item}</Text>
        </View>
      )}
      renderSectionHeader={({ section: { title } }) => (
        <View style={styles.header}>
          <Text style={styles.headerText}>{title}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 15,
    backgroundColor: '#fff'
  },
  header: {
    padding: 10,
    backgroundColor: '#f5f5f5'
  },
  headerText: {
    fontWeight: 'bold'
  }
});

import { TextInput, StyleSheet } from 'react-native';
import { useState } from 'react';

function InputDemo() {
  const [text, setText] = useState('');
  const [password, setPassword] = useState('');

  return (
    <>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText}
        placeholder="请输入文本"
        placeholderTextColor="#999"
      />

      <TextInput
        style={styles.input}
        value={password}
        onChangeText={setPassword}
        placeholder="请输入密码"
        secureTextEntry
      />

      <TextInput
        style={[styles.input, styles.multiline]}
        multiline
        numberOfLines={4}
        placeholder="多行文本"
      />
    </>
  );
}

const styles = StyleSheet.create({
  input: {
    height: 44,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 15,
    marginBottom: 15
  },
  multiline: {
    height: 100,
    paddingTop: 10
  }
});

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

function ButtonDemo() {
  return (
    <TouchableOpacity
      style={styles.button}
      activeOpacity={0.7}
      onPress={() => console.log('pressed')}
    >
      <Text style={styles.text}>点击我</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8
  },
  text: {
    color: '#fff',
    fontSize: 16,
    textAlign: 'center'
  }
});

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

function ModalDemo() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button title="打开弹窗" onPress={() => setVisible(true)} />

      <Modal
        visible={visible}
        animationType="slide"
        transparent
        onRequestClose={() => setVisible(false)}
      >
        <View style={styles.overlay}>
          <View style={styles.modal}>
            <Text style={styles.title}>弹窗标题</Text>
            <Text>弹窗内容</Text>
            <Button title="关闭" onPress={() => setVisible(false)} />
          </View>
        </View>
      </Modal>
    </>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center'
  },
  modal: {
    width: 300,
    padding: 20,
    backgroundColor: '#fff',
    borderRadius: 10
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10
  }
});

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

function LoadingDemo() {
  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color="#007AFF" />
    </View>
  );
}

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