现接续从零学习RN for OpenHarmony----初识组件（一）继续分析代码。

一、模块说明

模块 1：View + Text 组件演示

<View style={styles.section}>
  <Text style={styles.title}>1. 基础文本（Text）</Text>
  <Text style={styles.content}>Hello React Native！</Text>
  <Text style={styles.subContent}>这是入门第一个基础组件</Text>
</View>

• View style={styles.section}：用 View 包裹 3 个 Text，做布局和间距控制，style={styles.section} 是引用后面定义的样式。
• Text 组件：专门用于显示文字，RN 中所有文字必须放在 Text 里，不能直接写在 View 中（比如 <View>Hello</View> 是错误的）。
• 多个 Text 可以嵌套或并列，通过不同的 style 控制文字大小、颜色。

模块 2：Image 组件演示

<View style={styles.section}>
  <Text style={styles.title}>2. 图片（Image）</Text>
  {/* 网络图片：必须指定width和height，否则无法显示 */}
  <Image
    source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
    style={styles.image}
    resizeMode="contain"
  />
  {/* 本地图片：需要先将图片放入项目，再通过require引入 */}
  {/* <Image source={require('./assets/icon.png')} style={styles.image} /> */}
</View>

• Image 组件：用于显示图片，支持「网络图片」和「本地图片」两种方式。
• 网络图片：source={{ uri: '图片网址' }}，必须在 style 中指定 width 和 height，否则图片无法显示（这是 RN 和网页的重要区别）。
• resizeMode="contain"：图片的缩放模式，contain 表示「保持图片比例，完整显示在指定宽高内，不会变形」（其他常用模式还有 cover：铺满容器，可能裁剪；stretch：拉伸铺满，会变形）。
• 本地图片：注释里的代码，需要先把图片放到项目的 ./assets/ 文件夹下，然后用 require('图片路径') 引入，同样需要指定宽高。

模块 3：TextInput 组件演示（带状态绑定）

<View style={styles.section}>
  <Text style={styles.title}>3. 输入框（TextInput）</Text>
  <TextInput
    style={styles.input}
    placeholder="请输入一些内容..."
    placeholderTextColor="#999"
    value={inputValue}
    onChangeText={(text) => setInputValue(text)}
    clearButtonMode="while-editing"
  />
</View>

这是「数据绑定」的核心演示，TextInput 是用户输入交互的核心组件，各个属性的作用：

• placeholder：输入框为空时显示的提示文字（类似网页的 placeholder）。
• placeholderTextColor：提示文字的颜色。
• value={inputValue}：将输入框的显示内容和 inputValue 状态绑定，输入框显示的内容就是 inputValue 的值。
• onChangeText={(text) => setInputValue(text)}：输入框内容变化时触发的事件，text 是用户当前输入的内容，通过 setInputValue(text) 把输入内容更新到 inputValue 状态中（这样就实现了「用户输入 → 状态更新」的同步）。
• clearButtonMode="while-editing"：编辑时输入框右侧显示「清除按钮」（×），点击可以快速清空输入内容，提升用户体验。

模块 4：Button 组件演示（带点击事件）

<View style={styles.section}>
  <Text style={styles.title}>4. 按钮（Button）</Text>
  <Button
    title="点击查看输入内容"
    onPress={handleButtonClick}
    color="#2196F3"
  />
</View>

• Button 组件：RN 提供的原生按钮组件，使用简单，属性含义：
  • title：按钮上显示的文字（必须指定）。
  • onPress={handleButtonClick}：按钮被点击时触发的事件，这里绑定了我们之前定义的 handleButtonClick 函数（点击后弹出弹窗）。
  • color：按钮的背景颜色（仅支持纯色，如需复杂样式，后续可以用 TouchableOpacity 自定义按钮）。

二、样式定义：const styles = StyleSheet.create()

这部分是 RN 的「样式表」，相当于网页的 CSS，用于定义组件的外观、布局、间距等。

const styles = StyleSheet.create({
  // 样式对象：key 是样式名称（后续通过 styles.xxx 引用），value 是具体样式属性
  container: {
    flex: 1, // 核心布局属性：占满父容器的全部可用空间（这里占满屏幕）
    backgroundColor: '#f5f5f5', // 背景颜色
    padding: 20, // 内边距（上下左右都留 20 像素间距）
  },
  section: {
    marginBottom: 30, // 下边距（每个模块之间留 30 像素间距）
    alignItems: 'center', // 子组件在水平方向上居中对齐
  },
  title: {
    fontSize: 18, // 字体大小
    fontWeight: 'bold', // 字体加粗
    color: '#333', // 字体颜色
    marginBottom: 15, // 下边距
  },
  // 其他样式属性类似，不再逐一赘述
  content: { /* ... */ },
  subContent: { /* ... */ },
  image: { /* ... */ },
  input: { /* ... */ },
});

请注意：

• 样式创建必须用 StyleSheet.create()，而不是直接写普通对象（虽然普通对象也能生效，但 StyleSheet 会做优化，比如样式缓存、类型检查，是 RN 最佳实践）。
• RN 样式属性和 CSS 大部分类似，但有一些区别：
  • 属性名采用「驼峰命名法」（比如 CSS 的 font-size 对应 RN 的 fontSize，background-color 对应 backgroundColor）。
  • 布局核心采用「Flex 弹性布局」，flex: 1 是最常用的布局属性，用于占满可用空间。
  • 样式不支持继承（比如给 View 设置 fontSize，里面的 Text 不会继承这个属性，必须给 Text 单独设置）。
• 样式引用：通过 style={styles.样式名称} 绑定到组件上，如需绑定多个样式，可以写成 style={[styles.xxx, styles.yyy]}。

三. 导出 App 组件：export default App

        这是 ES6 的模块导出语法，作用是「将 App 组件暴露出去，让 RN 的入口文件能够导入并渲染这个组件」。

        RN 项目启动时，会找到入口文件（通常是 index.js），然后渲染这个导出的 App 组件，最终显示在手机屏幕上。

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