資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
Microsoft Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學列出 React Native 的重要核心元件
React Native 中最重要的核心元件如下：
| React Native 元件 | Android 原生檢視 | iOS 原生檢視 | Web 瀏覽器 | 描述 |
|---|---|---|---|---|
| View - <View> | 當應用在 Android 裝置上顯示時，<View> 元件將更改為 <ViewGroup> | 當應用在 iOS 裝置上顯示時，<View> 元件將更改為 <UIView> | 在 Web 瀏覽器中顯示時，<View> 元件將更改為 <div> 標籤 | 它是支援 flexbox 佈局的核心容器。它還管理觸控處理。 |
| Text - <Text> | 當應用在 Android 裝置上顯示時，<Text> 元件將更改為 <TextView> | 當應用在 iOS 裝置上顯示時，<Text> 元件將更改為 <UITextView> | 在 Web 瀏覽器中顯示時，<Text> 元件將更改為 <p> 標籤 | 用於向用戶顯示文字。它還處理樣式和觸控事件。 |
| Image - <Image> | 當應用在 Android 裝置上顯示時，<Image> 元件將更改為 <ImageView> | 當應用在 iOS 裝置上顯示時，<Image> 元件將更改為 <UIImageView> | 在 Web 瀏覽器中顯示時，<Image> 元件將更改為 <img> 標籤 | 用於顯示影像。 |
| ScrollView - <ScrollView> | 當應用在 Android 裝置上顯示時，<ScrollView> 元件將更改為 <ScrollView> | 當應用在 iOS 裝置上顯示時，<ScrollView> 元件將更改為 <UIScrollView> | 在 Web 瀏覽器中顯示時，<ScrollView> 元件將更改為 <div> 標籤 | 包含元件和檢視的滾動容器。 |
| TextInput - <TextInput> | 當應用在 Android 裝置上顯示時，<TextInput> 元件將更改為 <EditText> | 當應用在 iOS 裝置上顯示時，<TextInput> 元件將更改為 <UITextField> | 在 Web 瀏覽器中顯示時，<TextInput> 元件將更改為 <input type="text"> 標籤。 | 使用者可以輸入文字的輸入元素 |
示例
以下是使用 <View>、<Text>、<Image>、<ScrollView> 和 <TextInput> 的工作示例
要使用 Text、View、Image、ScrollView、TextInput，需要從 react-native 匯入元件，如下所示：
import { View, Text, Image, ScrollView, TextInput } from 'react-native';View 元件主要用於容納文字、按鈕、影像等。該元件使用方法如下：
<View>
<Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
<Image
source={{
uri: 'https://tutorialspoint.tw/react_native/images/logo.png',
}}
style={{ width: 311, height: 91 }}
/>
</View>它包含 Text 和 Image 元件。ScrollView 元件的行為類似於處理 View、Text、Image、Button 和其他 React Native 元件的父元件。
import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
const App = () => {
return (
<ScrollView>
<Text style={{ padding:"10%", color:"green", "fontSize":"25" }}>Welcome to TutorialsPoints!</Text>
<View>
<Text style={{ padding:"10%", color:"red" }}>Inside View Container</Text>
<Image
source={{
uri:'https://tutorialspoint.tw/react_native/images/logo.png',
}}
style={{ width: 311, height: 91 }}
/>
</View>
<TextInput
style={{
height: 40,
borderColor: 'black',
borderWidth: 1
}}
defaultValue="Type something here"
/>
</ScrollView>
);
}
export default App;輸出
更新於：2021-07-01
378 次瀏覽
廣告