React Native 全栈开发实战班 - 核心组件与导航

在 React Native 中，组件是构建用户界面的基本单元。React Native 提供了丰富的内置组件，涵盖了从基础布局到复杂交互的各种需求。本章节将详细介绍常用的内置组件，并重点讲解列表与滚动视图的使用。

1. 常用内置组件详解

React Native 提供了许多内置组件，开发者可以利用这些组件快速构建应用界面。以下是一些常用的内置组件及其详细用法：

1.1 View

<View> 组件是 React Native 中最基础的布局组件，类似于 HTML 中的 <div>。它用于包裹其他组件，并支持 Flexbox 布局。

常用属性：

• style：定义组件的样式。
• flexDirection：定义主轴方向（row 或 column）。
• justifyContent：定义子元素在主轴上的对齐方式。
• alignItems：定义子元素在交叉轴上的对齐方式。

示例：

<View style={{ flex: 1, backgroundColor: '#f0f0f0', padding: 10 }}>
  <Text>Hello, World!</Text>
</View>

1.2 Text

<Text> 组件用于显示文本内容。

常用属性：

• style：定义文本样式。
• onPress：定义点击事件处理函数。
• numberOfLines：限制文本显示的行数。

示例：

<Text style={{ fontSize: 18, color: '#333' }}>Hello, React Native!</Text>

1.3 Image

<Image> 组件用于显示图片。

常用属性：

• source：图片资源，可以是本地路径或网络地址。
• style：定义图片样式。
• resizeMode：定义图片的缩放模式（如 cover, contain, stretch）。

示例：

<Image
  source={{ uri: 'https://example.com/image.png' }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

1.4 TextInput

<TextInput> 组件用于用户输入文本。

常用属性：

• style：定义输入框样式。
• placeholder：设置占位符文本。
• value：绑定输入框的值。
• onChangeText：定义文本变化时的处理函数。
• secureTextEntry：是否显示为密码输入框。

示例：

<TextInput
  style={{ height: 40, borderColor: '#ccc', borderWidth: 1, paddingHorizontal: 10 }}
  placeholder="请输入用户名"
  value={username}
  onChangeText={(text) => setUsername(text)}
/>

1.5 Button

<Button> 组件用于创建按钮。

常用属性：

• title：按钮标题。
• onPress：定义按钮点击事件处理函数。
• color：设置按钮颜色。

示例：

<Button
  title="Press Me"
  onPress={() => console.log('Button Pressed')}
  color="#007bff"
/>

1.6 TouchableOpacity

<TouchableOpacity> 组件用于处理用户点击事件，并提供点击反馈效果。

常用属性：

• onPress：定义点击事件处理函数。
• activeOpacity：设置点击时的透明度。

示例：

<TouchableOpacity onPress={() => console.log('TouchableOpacity Pressed')} activeOpacity={0.8}>
  <Text>Press Me</Text>
</TouchableOpacity>

1.7 ScrollView

<ScrollView> 组件用于创建可滚动的视图，适用于内容较多但数量有限的情况。

常用属性：

• contentContainerStyle：定义内容容器的样式。
• horizontal：是否水平滚动。
• showsVerticalScrollIndicator：是否显示垂直滚动条。

示例：

<ScrollView>
  <Text>内容1</Text>
  <Text>内容2</Text>
  <Text>内容3</Text>
  {/* 更多内容 */}
</ScrollView>

1.8 FlatList

<FlatList> 组件用于高性能地渲染长列表数据。

常用属性：

• data：列表数据源。
• renderItem：定义列表项的渲染函数。
• keyExtractor：定义列表项的唯一键。
• ListHeaderComponent：定义列表头部组件。
• ListFooterComponent：定义列表底部组件。

示例：

const data = [
  { id: '1', title: 'Item 1' },
  { id: '2', title: 'Item 2' },
  // 更多数据
];

<FlatList
  data={data}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  keyExtractor={(item) => item.id}
/>

1.9 SectionList

<SectionList> 组件用于渲染分组列表数据。

常用属性：

• sections：分组数据源。
• renderItem：定义列表项的渲染函数。
• renderSectionHeader：定义分组头部的渲染函数。
• keyExtractor：定义列表项的唯一键。

示例：

const sections = [
  { title: 'A', data: ['Apple', 'Apricot'] },
  { title: 'B', data: ['Banana', 'Blueberry'] },
  // 更多分组
];

<SectionList
  sections={sections}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>}
  keyExtractor={(item, index) => item + index}
/>

1.10 SafeAreaView

<SafeAreaView> 组件用于适配不同设备的屏幕安全区域，避免内容被刘海、状态栏等遮挡。

示例：

<SafeAreaView style={{ flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#f0f0f0' }}>
    <Text>Hello, SafeAreaView!</Text>
  </View>
</SafeAreaView>

导师答疑