核心组件：
View（视图）：View 是 最基本的组件之一，用于创建布局结构，用于包裹和组织其他组件。
Text（文本）：Text 组件用于显示文本内容，在 Text 组件中显示静态文本或动态生成的文本。
TouchableOpacity（触摸透明度）：TouchableOpacity 是用于处理用户触摸操作的组件。当用户触摸组件时，TouchableOpacity 会在视觉上降低其透明度，以提供触摸的视觉反馈。
Dimensions（尺寸）：Dimensions 组件用于获取设备屏幕的尺寸信息，包括屏幕宽度和高度。在创建响应式布局时非常有用。
StyleSheet（样式表）：StyleSheet 是用于创建和管理样式的工具，使用 StyleSheet 来定义组件的样式，并将其应用于对应的组件。
StatusBar（状态栏）：StatusBar 组件用于控制应用程序的状态栏的样式和行为。使用 StatusBar 来设置状态栏的背景颜色、文字颜色等属性。
Image（图片）：Image 组件用于在应用程序中显示图片。使用 Image 组件加载网络图片或本地图片，并根据需要对其进行调整和处理。
ImageBackground（背景图片）：ImageBackground 组件允许在其内部放置一个图片，作容器的背景。适合创建具有背景图片的复杂布局。
使用例子：
import React from 'react';
import {SafeAreaView,View,FlatList,StyleSheet,Text,StatusBar,
} from 'react-native';const DATA = [{id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',title: 'First Item',},{id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',title: 'Second Item',},{id: '58694a0f-3da1-471f-bd96-145571e29d72',title: 'Third Item',},
];type ItemProps = {title: string};const Item = ({title}: ItemProps) => (<View style={styles.item}><Text style={styles.title}>{title}</Text></View>
);const App = () => {return (<SafeAreaView style={styles.container}><FlatListdata={DATA}renderItem={({item}) => <Item title={item.title} />}keyExtractor={item => item.id}/></SafeAreaView>);
};const styles = StyleSheet.create({container: {flex: 1,marginTop: StatusBar.currentHeight || 0,},item: {backgroundColor: '#f9c2ff',padding: 20,marginVertical: 8,marginHorizontal: 16,},title: {fontSize: 32,},
});export default App;<ButtononPress={onPressLearnMore}title="Learn More"color="#841584"accessibilityLabel="Learn more about this purple button"
/>
1 alert 警告框组件
2 Switch 开关组件<SwitchtrackColor={{ false: "#767577", true: "#81b0ff" }}thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}ios_backgroundColor="#3e3e3e"onValueChange={toggleSwitch}value={isEnabled}/>
3 ActivityIndicator 加载指示器组件<ActivityIndicator size="small" color="#0000ff" />
4 image 图片组件<Imagestyle={styles.tinyLogo}source={require('@expo/snack-static/react-native-logo.png')}/>
5 textinput 输入框组件<TextInputstyle={styles.input}onChangeText={onChangeText}value={text}/>
6 TouchableHighlight/TouchableOpacity/TouchableWithoutFeedback触碰组件<TouchableHighlightactiveOpacity={0.6}underlayColor="#DDDDDD"onPress={() => alert('Pressed!')}><MyComponent /> </TouchableHighlight>;<TouchableOpacitystyle={styles.button}onPress={onPress}><TouchableWithoutFeedback onPress={onPress}><View style={styles.button}><Text>Touch Here</Text></View></TouchableWithoutFeedback>
7 ScrollView 滚动视图组件<SafeAreaView style={styles.container}><ScrollView style={styles.scrollView}><Text style={styles.text}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.</Text></ScrollView></SafeAreaView>
8 SectionList 分组列表组件<SafeAreaView style={styles.container}><SectionListsections={DATA}keyExtractor={(item, index) => item + index}renderItem={({item}) => (<View style={styles.item}><Text style={styles.title}>{item}</Text></View>)}renderSectionHeader={({section: {title}}) => (<Text style={styles.header}>{title}</Text>)}/></SafeAreaView>
9 FlatList 高性能列表组件<SafeAreaView style={styles.container}><FlatListdata={DATA}renderItem={renderItem}keyExtractor={item => item.id}extraData={selectedId}/></SafeAreaView>
10 Animated 动画组件
