資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究什麼是 View 元件以及如何在 React Native 中使用它？
View 是 React Native 中最常見也是最核心的元素。你可以將其視為等同於 Web 開發中使用的 div 元素。
View 會根據其執行的平臺對映到其本機等效項。因此，在 Android 上，View 將對映到 <ViewGroup>，在 iOS 上將對映到 <UIView>，在 Web 環境中將對映到 <div>。
用例
現在讓我們看看一些常見的用例。
當您需要將元素包裝在容器內時，可以使用 View 作為容器元素。
當您想在父元素內巢狀更多元素時，父元素和子元素都可以是 View。它可以擁有任意數量的子元素。
當您想為不同的元素設定樣式時，您可以將它們放在 View 內，因為它支援 style 屬性、flexbox 等。
View 還支援合成觸控事件，這對於不同的目的很有用。
示例 1：在 View 內顯示文字
此示例建立一個 View 元件，它包裝了兩個 View 元件。這兩個 View 元件內部都有一個 Text 元件。
您要使用的元件必須首先匯入。在示例中，我正在使用 View 和 Text，因此兩者都從 react-native 匯入，如下所示：
import { Text, View} from 'react-native';
import React, { Component } from "react";
import { Text, View} from 'react-native';
class App extends Component {
render(props) {
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<View>
<Text style={{color:'green', fontSize:30}}> View Component </Text>
</View>
<View>
<Text style={{color:'red', fontSize:25}}>Welcome to Tutorialspoint</Text>
</View>
</View>
);
}
}
export default App;輸出
示例 2：在 View 內顯示文字/TextInput/按鈕
此示例建立一個 View 元件，它具有三個 View 元件，每個元件都包含 Text、TextInput 和一個按鈕。
要使用 react-native 中的元件，請首先匯入它們，如下所示：
import { Text, View, TextInput, Button} from 'react-native';import React, { Component } from "react";
import { Text, View, TextInput, Button} from 'react-native';
class App extends Component {
render(props) {
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<View>
<Text style={{color:'green', fontSize:30}}> View Component </Text>
</View>
<View>
<TextInput style={{ height: 40, borderColor: 'black', borderWidth: 1 }} defaultValue="Type something here" />
</View>
<View>
<Button title="Click Me" color="red" />
</View>
</View>
);
}
}
export default App;輸出
更新於：2021年7月1日
760 次瀏覽
廣告