接续从零学习RN for OpenHarmony----初识组件（五）继续学习基础组件用法。

一、KeyboardAvoidingView + TextInput （键盘适配输入框）

<View style={styles.section}>
  <Text style={styles.sectionTitle}>6. 键盘适配（KeyboardAvoidingView）</Text>
  <KeyboardAvoidingView
    style={styles.keyboardAvoidWrap}
    behavior="padding"
    keyboardVerticalOffset={20}
  >
    <TextInput
      style={styles.input}
      placeholder="请输入内容，键盘弹出不会遮挡"
      placeholderTextColor="#999"
      value={inputValue}
      onChangeText={(text) => setInputValue(text)}
      clearButtonMode="while-editing"
    />
  </KeyboardAvoidingView>
</View>

1. 结构作用：

   • KeyboardAvoidingView：RN 自带的键盘适配容器，核心功能是「当键盘弹出时，自动调整自身位置或尺寸，避免输入框被键盘遮挡」，是移动端输入框的必备适配组件。
   • TextInput：RN 自带的输入框组件，用于接收用户的文本输入（如登录账号、搜索内容、填写表单等）。

2. 核心属性详解：

   • 先讲 KeyboardAvoidingView 的关键属性：
     1. behavior：键盘适配方式，可选值 padding（给容器添加内边距，抬高输入框）、height（调整容器高度，抬高输入框）、position（调整容器位置，抬高输入框），这里用 padding 是最常用、最稳定的适配方式。
     2. keyboardVerticalOffset：键盘偏移量，用于微调输入框和键盘之间的距离，这里设置为 20（dp），避免输入框和键盘靠得太近，提升用户输入体验。
   • 再讲 TextInput 的关键属性：
     1. style：输入框的样式，这里设置了高度、背景色、内边距、圆角、边框，让输入框看起来整洁美观。
     2. placeholder：输入框占位提示文字，用于提示用户需要输入什么内容，当输入框有内容时，占位文字会自动隐藏。
     3. placeholderTextColor：占位文字的颜色，这里设置为浅灰色（#999），避免和输入内容混淆。
     4. value：绑定输入框的内容，接收一个字符串，这里绑定前面定义的 inputValue 状态，实现「受控组件」（输入框的内容由状态控制）。
     5. onChangeText：输入内容变化时的回调函数，用户在输入框中输入 / 删除文字时，会自动传递当前输入框的文本（text），这里用于更新 inputValue 状态，让输入框的内容和状态保持同步。
     6. clearButtonMode：清除按钮的显示时机，这里设置为 while-editing（编辑时显示），输入框右侧会出现一个「×」按钮，用户点击可以快速清空输入框内容，提升用户体验。

3. 运行效果：

   • 初始状态：输入框内显示浅灰色占位文字「请输入内容，键盘弹出不会遮挡」。
   • 点击输入框：弹出手机键盘，KeyboardAvoidingView 会自动给容器添加内边距，抬高输入框，避免输入框被键盘遮挡。
   • 输入文字：输入框内会显示用户输入的文字，右侧出现一个「×」清除按钮。
   • 点击清除按钮：输入框内容被清空，恢复占位文字状态。
   • 收起键盘：输入框保持当前内容，KeyboardAvoidingView 自动移除内边距，恢复初始位置。

总结

return() 中的 6 个核心功能模块对应 RN 的常用基础组件，每个模块的核心要点可总结为：

1. Switch：二选一状态切换，核心属性 value + onValueChange，用于开启 / 关闭类功能。
2. ActivityIndicator：加载状态展示，核心属性 animating，用于耗时操作的状态提示。
3. TouchableOpacity：自定义可点击组件，核心属性 onPress，用于实现用户交互按钮。
4. FlatList：无分组高性能列表，核心属性 data + renderItem + keyExtractor，用于展示普通列表数据。
5. SectionList：分组高性能列表，核心属性 sections + renderSectionHeader + renderItem，用于展示有分类的列表数据。
6. TextInput（搭配 KeyboardAvoidingView）：文本输入 + 键盘适配，核心属性 value + onChangeText，用于接收用户文本输入，避免键盘遮挡。

 欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net