React Native 之 原生组件和核心组件(二)

原生组件

在 Android 开发中是使用 Kotlin 或 Java 来编写视图;在 iOS 开发中是使用 Swift 或 Objective-C 来编写视图。在 React Native 中,则使用 React 组件通过 JavaScript 来调用这些视图。在运行时,React Native 为这些组件创建相应的 Android 和 iOS 视图。由于 React Native 组件就是对原生视图的封装,因此使用 React Native 编写的应用外观、感觉和性能与其他任何原生应用一样。

核心组件

React Native 具有许多核心组件,从表单控件到活动指示器,应有尽有。
React Native 使用与 React 组件相同的 API 结构。需要了解 React 组件 API 才能上手。
主要有以下核心组件:
在这里插入图片描述
Hello world 栗子:

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <Text>Some text</Text>
      <View>
        <Text>Some more text</Text>
        <Image
          source={{
            uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
          }}
          style={{ width: 200, height: 200 }}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="You can type in me"
      />
    </ScrollView>
  );
}

export default App;

相关推荐

  1. React 函数式组件

    2024-05-15 21:18:16       26 阅读
  2. React----函数组件组件

    2024-05-15 21:18:16       52 阅读
  3. react函数式组件组件

    2024-05-15 21:18:16       60 阅读
  4. React 组件模块依赖

    2024-05-15 21:18:16       30 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-15 21:18:16       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-15 21:18:16       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-15 21:18:16       82 阅读
  4. Python语言-面向对象

    2024-05-15 21:18:16       91 阅读

热门阅读

  1. yolo进行视频检测结果没有生成

    2024-05-15 21:18:16       30 阅读
  2. Linux函数

    2024-05-15 21:18:16       28 阅读
  3. nvr国标sip端口信息异常的处理

    2024-05-15 21:18:16       33 阅读
  4. SpringBoot+Mock Mvc测试web接口增删改查、导入导出

    2024-05-15 21:18:16       30 阅读
  5. 微信小程序更新日志

    2024-05-15 21:18:16       32 阅读
  6. 设计模式之——单例模式

    2024-05-15 21:18:16       34 阅读
  7. android设计模式-单例模式

    2024-05-15 21:18:16       38 阅读
  8. 【设计模式】单例模式-学习记录

    2024-05-15 21:18:16       34 阅读
  9. redis中的大key问题

    2024-05-15 21:18:16       28 阅读
  10. Android Studio实现简易音乐播放器(期末作业)

    2024-05-15 21:18:16       33 阅读
  11. Android security知识点总结

    2024-05-15 21:18:16       26 阅读