React Native中最重要的核心組件如下 –
| React Native組件 | Android本機視圖 | IOS本機視圖 | 網絡瀏覽器 | 說明 |
|---|---|---|---|---|
| 查看 – | 當應用程序在 Android 設備中顯示時， 組件將更改為 | 當應用程序出現時在 IOS 設備中看到 組件將更改為 | 在 Web 瀏覽器中看到 組件將更改為 標簽 | 是支持flexbox布局的核心容器。它還管理觸摸處理。 |
| 文本 – | 當應用程序出現在Android 設備 組件將更改為 | 當應用程序在 IOS 設備中看到時， 組件將更改為 | 當在網絡瀏覽器中看到時， 組件將更改為
標簽 |
用于向用戶顯示文本。它還處理樣式和觸摸事件。 |
| 圖像 – | 當應用程序在 Android 設備中看到 組件將更改為 | 當在 IOS 設備中看到該應用時， 組件將更改為 | 當在網頁瀏覽器中看到時，組件將更改為標簽 | 用于顯示圖像。 | Scrollview – | 當應用程序在 Android 設備中看到時， 組件將更改為 | 當在 Web 瀏覽器中看到時， 組件將更改為 標簽 | 具有組件和視圖的滾動容器。 |
| TextInput – | 當應用程序在 Android 設備中顯示時， 組件將更改為 | 當應用程序在 IOS 設備中顯示時， 組件將更改為 更改為 | 當在 Web 瀏覽器中看到 組件時，將更改為 標記。 | 用戶可以在其中輸入文本的輸入元素 |
示例
以下是 、、、 和 的工作示例
要使用 Text、View、Image、ScrollView、TextInput，您需要從react-native 導入組件，如下所示 – p>
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://www.tutorialspoint.com/react_native/images/logo.png',
}}
style={{ width: 311, height: 91 }}
/>
</View>
登錄后復制
里面有文本和圖像組件。 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://www.tutorialspoint.com/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;
登錄后復制
輸出
以上就是列出React Native重要的核心組件的詳細內容，更多請關注www.92cms.cn其它相關文章！
