第4章 UI组件基础

4、UI组件基础：View、Text、Image、ScrollView、TextInput等核心组件的使用与属性详解

好，咱们今天来聊聊移动端开发里最基础、也最常用到的几个UI组件。说实话，不管你是做React Native、Flutter还是SwiftUI，这几个组件的概念都是相通的。我当年刚入行时，就是靠啃透这几个组件，才慢慢摸到门道的。

你想想看，一个App的界面，说白了就是由这些基础组件拼装起来的。就像搭积木一样，你得先认识每块积木长什么样、能怎么用，才能搭出漂亮的房子。今天我就带你一个一个过一遍。

4.1 View：一切布局的基石

View，你可以把它理解成一个“容器”。它本身不显示任何内容，但它的作用可大了——用来包裹其他组件，控制它们的位置、大小、边距和背景色。

我个人习惯把View当成一个“盒子”。你在盒子里放Text、放Image，然后通过调整盒子的样式，来控制里面东西的排列方式。

核心属性速览：

属性	作用	常用值举例
width / height	设置宽高	100, '50%', 'auto'
margin / padding	外边距 / 内边距	10, { top: 5, left: 10 }
backgroundColor	背景颜色	'#f0f0f0', 'rgba(0,0,0,0.1)'
borderRadius	圆角	8, 20
flexDirection	子元素排列方向	'row', 'column'
justifyContent	主轴对齐方式	'center', 'space-between'
alignItems	交叉轴对齐方式	'center', 'flex-start'

举个例子，你想让两个按钮水平居中排列，代码大概长这样：

<View style={{ 
  flexDirection: 'row', 
  justifyContent: 'center', 
  alignItems: 'center',
  marginTop: 20 
}}>
  <Button title="确认" />
  <Button title="取消" />
</View>

我的小技巧：调试布局时，我习惯先给View加个明显的背景色（比如红色或蓝色），这样能一眼看出它的实际占位。调完再删掉就行。

4.2 Text：展示文字的门面

Text组件，就是用来显示文字的。别小看它，里面的门道可不少。

我记得有一次，产品经理说“这个标题字号再大一点，颜色再深一点”，我当时就靠Text的几个属性搞定了。

常用属性：

fontSize：字号，单位是逻辑像素（pt/dp）。我一般用14、16、18这几个值。
fontWeight：字重，'normal'、'bold'、'100'~'900'。
color：文字颜色。
textAlign：对齐方式，'left'、'center'、'right'。
numberOfLines：最多显示几行，超出部分用省略号。
lineHeight：行高，这个对阅读体验影响很大。

来看个实际例子：

<Text style={{ 
  fontSize: 18, 
  fontWeight: 'bold', 
  color: '#333',
  textAlign: 'center',
  numberOfLines: 2
}}>
  这是一段标题文字，如果太长会被截断...
</Text>

注意：Text组件可以嵌套！比如你想在一段文字里让某个词变红，可以这样写：<Text>这是<Text style={{color: 'red'}}>红色</Text>文字</Text>。这个技巧在富文本展示时特别有用。

4.3 Image：图片展示与优化

Image组件，用来显示本地或网络图片。嗯，这里要注意，网络图片必须指定宽高，否则显示不出来。

我曾经踩过一个坑：加载网络图片时没做错误处理，结果图片链接失效了，整个页面就空了一块。后来我养成了习惯，一定会加 defaultSource 和 onError 回调。

核心属性：

source：图片来源。本地用 require('./logo.png')，网络用 { uri: 'https://...' }。
resizeMode：图片缩放模式。'cover'（裁剪填充）、'contain'（完整显示）、'stretch'（拉伸）。
style：可以设置宽高、圆角等。

代码示例：

<Image
  source={{ uri: 'https://example.com/avatar.jpg' }}
  style={{ width: 100, height: 100, borderRadius: 50 }}
  resizeMode="cover"
  defaultSource={require('./placeholder.png')}
  onError={() => console.log('图片加载失败')}
/>

避坑指南：我曾经遇到过图片加载慢导致页面卡顿的问题。后来我用了图片缓存库（比如FastImage），并且把图片尺寸压缩到实际显示尺寸的2倍以内，效果好了很多。

4.4 ScrollView：让内容滚动起来

当内容超出屏幕时，你就需要ScrollView了。它就像一个可以滚动的容器，把子元素全部包裹进去。

说实话，ScrollView用起来很简单，但有几个点容易忽略：

horizontal：设为true时，变成横向滚动。
showsVerticalScrollIndicator：是否显示滚动条，我一般设为false，更清爽。
pagingEnabled：分页滚动，适合做轮播图。
onScroll：监听滚动事件，可以用来做吸顶效果或加载更多。

一个常见的用法：

<ScrollView 
  style={{ flex: 1 }}
  showsVerticalScrollIndicator={false}
  onScroll={handleScroll}
>
  <View style={{ height: 200, backgroundColor: '#ff6b6b' }} />
  <View style={{ height: 200, backgroundColor: '#feca57' }} />
  <View style={{ height: 200, backgroundColor: '#48dbfb' }} />
</ScrollView>

注意：ScrollView会一次性渲染所有子元素。如果列表很长（比如几百条），建议用FlatList或VirtualizedList，否则性能会崩。我当年在CRM系统的客户列表页就吃过这个亏，后来全改成了FlatList。

4.5 TextInput：用户输入的入口

TextInput，就是输入框。用户注册、搜索、填写备注，都靠它。

它的属性比较多，我挑几个重点说：

placeholder：占位提示文字。
value / onChangeText：受控组件的标准用法。
secureTextEntry：密码输入时设为true。
keyboardType：键盘类型，'default'、'numeric'、'email-address'等。
multiline：多行输入，适合备注框。
maxLength：最大输入长度。

来看一个带清除按钮的搜索框例子：

<TextInput
  style={{ 
    height: 40, 
    borderColor: '#ddd', 
    borderWidth: 1, 
    borderRadius: 8, 
    paddingHorizontal: 12 
  }}
  placeholder="搜索客户名称"
  value={searchText}
  onChangeText={setSearchText}
  clearButtonMode="while-editing"
  returnKeyType="search"
  onSubmitEditing={handleSearch}
/>

我的经验：TextInput在iOS和Android上的表现有差异。比如iOS默认有内边距，Android没有。我一般会统一设置 paddingVertical: 0 来消除差异。另外，记得用 onSubmitEditing 监听键盘的“搜索”或“回车”按钮，用户体验会好很多。

4.6 组合实战：一个简单的客户名片卡片

光说不练假把式。咱们把上面几个组件组合起来，做一个客户名片卡片：

<View style={{ 
  flexDirection: 'row', 
  padding: 16, 
  backgroundColor: '#fff', 
  borderRadius: 12, 
  marginHorizontal: 16, 
  marginVertical: 8,
  shadowColor: '#000',
  shadowOpacity: 0.1,
  shadowRadius: 8,
  elevation: 4
}}>
  <Image
    source={{ uri: 'https://example.com/avatar.jpg' }}
    style={{ width: 60, height: 60, borderRadius: 30 }}
    resizeMode="cover"
  />
  <View style={{ marginLeft: 12, flex: 1 }}>
    <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#333' }}>
      张三
    </Text>
    <Text style={{ fontSize: 14, color: '#666', marginTop: 4 }}>
      销售经理 | 北京分公司
    </Text>
    <Text style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
      最近联系：2024-03-15
    </Text>
  </View>
</View>

你看，一个View做外层容器，里面放Image和Text，再配合几个样式属性，一个漂亮的名片就出来了。这就是基础组件的魅力——组合起来，能做出无限可能。

4.7 本章小结

今天咱们把View、Text、Image、ScrollView、TextInput这几个核心组件都过了一遍。说实话，这些组件你刚开始可能觉得简单，但真正用好、用对，还是需要一些实践积累的。

我建议你动手写几个小例子：比如做一个个人资料页、一个搜索框、一个可滚动的新闻列表。遇到问题别怕，多查文档、多调试，慢慢就熟练了。

下一章咱们会深入讲布局系统，包括Flexbox的完整用法。到时候你会发现，今天学的View组件，就是布局的核心。

好，今天就到这里。有问题随时交流。

公众号:蓝海资料掘金营，微信deep3321

📚 课程目录

4、UI组件基础：View、Text、Image、ScrollView、TextInput等核心组件的使用与属性详解

4.1 View：一切布局的基石

4.2 Text：展示文字的门面

4.3 Image：图片展示与优化

4.4 ScrollView：让内容滚动起来

4.5 TextInput：用户输入的入口

4.6 组合实战：一个简单的客户名片卡片

4.7 本章小结