在 React Native 中，JSX 是一種 JavaScript 的語法擴展，用于描述 UI 界面。JSX 語法類似于 HTML，但它是 JavaScript 的語法糖，可以直接在 JavaScript 代碼中編寫 UI 組件。本章節(jié)將介紹 JSX 語法的基礎(chǔ)知識，以及 React Native 中常用的基礎(chǔ)組件。

1. JSX 語法簡介

JSX (JavaScript XML) 是 React 引入的一種語法擴展，允許開發(fā)者在 JavaScript 代碼中直接編寫類似 HTML 的標簽，從而更直觀地描述 UI 結(jié)構(gòu)。

JSX 的特點：

• 聲明式語法： 開發(fā)者可以直觀地描述 UI 的結(jié)構(gòu)和樣式。
• 與 JavaScript 混用： 可以在 JSX 中嵌入 JavaScript 表達式，使用花括號 {} 包裹。
• 組件化： JSX 用于定義 React 組件，組件可以嵌套組合，構(gòu)建復(fù)雜的 UI。

示例：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';const App = () => {const name = '張三';return (<View style={styles.container}><Text style={styles.text}>Hello, {name}!</Text></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},text: {fontSize: 20,color: '#333',},
});export default App;

在上述代碼中，<View> 和 <Text> 是 JSX 標簽，分別對應(yīng) React Native 的 View 和 Text 組件。{name} 是一個 JavaScript 表達式，用于動態(tài)渲染變量值。

注意事項：

• JSX 標簽必須正確閉合。
• 組件名稱首字母必須大寫，例如 <View> 而不是 <view>。
• JSX 中不能使用 class 屬性，應(yīng)使用 className（在 React 中）或 style（在 React Native 中）代替。

2. React Native 基礎(chǔ)組件

React Native 提供了豐富的內(nèi)置組件，用于構(gòu)建移動應(yīng)用的 UI。以下是一些常用的基礎(chǔ)組件：

2.1 View

<View> 組件類似于 HTML 中的 <div>，用于布局和容器。

示例：

<View style={styles.container}><Text>Hello, World!</Text>
</View>

2.2 Text

<Text> 組件用于顯示文本內(nèi)容。

示例：

<Text style={styles.text}>Hello, React Native!</Text>

2.3 Image

<Image> 組件用于顯示圖片。

示例：

<Imagesource={{ uri: 'https://example.com/image.png' }}style={styles.image}
/>

2.4 TextInput

<TextInput> 組件用于用戶輸入文本。

示例：

<TextInputstyle={styles.input}placeholder="請輸入內(nèi)容"onChangeText={(text) => setText(text)}
/>

2.5 ScrollView

<ScrollView> 組件用于可滾動的視圖。

示例：

<ScrollView><Text>內(nèi)容1</Text><Text>內(nèi)容2</Text><Text>內(nèi)容3</Text>{/* 更多內(nèi)容 */}
</ScrollView>

2.6 FlatList

<FlatList> 組件用于高性能的列表渲染，適用于長列表。

示例：

const data = [{ id: '1', title: 'Item 1' },{ id: '2', title: 'Item 2' },// 更多數(shù)據(jù)
];<FlatListdata={data}renderItem={({ item }) => <Text>{item.title}</Text>}keyExtractor={(item) => item.id}
/>

2.7 TouchableOpacity

<TouchableOpacity> 組件用于處理用戶點擊事件。

示例：

<TouchableOpacity onPress={() => console.log('Button Pressed')}><Text>Press Me</Text>
</TouchableOpacity>

2.8 StyleSheet

<StyleSheet> 用于定義組件的樣式。

示例：

const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},text: {fontSize: 20,color: '#333',},
});

3. JSX 語法進階

3.1 條件渲染

在 JSX 中，可以使用 JavaScript 表達式進行條件渲染。

示例：

const isLoggedIn = true;return (<View>{isLoggedIn ? <Text>Welcome back!</Text> : <Text>Please log in.</Text>}</View>
);

3.2 列表渲染

可以使用 map 方法渲染列表數(shù)據(jù)。

示例：

const items = ['蘋果', '香蕉', '橘子'];return (<View>{items.map((item, index) => (<Text key={index}>{item}</Text>))}</View>
);

3.3 樣式傳遞

可以通過 props 傳遞樣式，實現(xiàn)組件樣式的動態(tài)調(diào)整。

示例：

const Box = ({ style }) => <View style={[styles.box, style]} />;const styles = StyleSheet.create({box: {width: 100,height: 100,backgroundColor: '#f0f0f0',},
});

4. 綜合示例

以下是一個綜合示例，展示了如何使用 JSX 和基礎(chǔ)組件構(gòu)建一個簡單的登錄頁面。

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Image } from 'react-native';const LoginScreen = () => {const [username, setUsername] = useState('');const [password, setPassword] = useState('');const handleLogin = () => {console.log('Username:', username);console.log('Password:', password);};return (<View style={styles.container}><Imagesource={{ uri: 'https://example.com/logo.png' }}style={styles.logo}/><Text style={styles.title}>登錄</Text><TextInputstyle={styles.input}placeholder="用戶名"value={username}onChangeText={(text) => setUsername(text)}/><TextInputstyle={styles.input}placeholder="密碼"secureTextEntryvalue={password}onChangeText={(text) => setPassword(text)}/><TouchableOpacity style={styles.button} onPress={handleLogin}><Text style={styles.buttonText}>登錄</Text></TouchableOpacity></View>);
};const styles = StyleSheet.create({container: {flex: 1,padding: 20,justifyContent: 'center',backgroundColor: '#fff',},logo: {width: 100,height: 100,alignSelf: 'center',marginBottom: 20,},title: {fontSize: 24,textAlign: 'center',marginBottom: 20,},input: {height: 40,borderColor: '#ccc',borderWidth: 1,borderRadius: 5,paddingHorizontal: 10,marginBottom: 10,},button: {backgroundColor: '#007bff',padding: 10,borderRadius: 5,alignItems: 'center',},buttonText: {color: '#fff',fontSize: 16,},
});export default LoginScreen;

總結(jié)

本章節(jié)介紹了 JSX 語法的基礎(chǔ)知識和 React Native 中常用的基礎(chǔ)組件。通過學習 JSX 語法，學員可以更直觀地描述 UI 結(jié)構(gòu)，并結(jié)合 React Native 組件構(gòu)建復(fù)雜的移動應(yīng)用界面。

課后作業(yè)

1. 練習使用 JSX 語法，編寫一個簡單的組件，展示不同的 UI 元素。
2. 熟悉 React Native 基礎(chǔ)組件的使用，嘗試實現(xiàn)一個包含文本、圖片、輸入框和按鈕的頁面。
3. 閱讀 React Native 官方文檔，深入了解其他常用組件和屬性。

導(dǎo)師指導(dǎo)