JSX 语法与基础组件使用

在 React Native 中，JSX 是一种 JavaScript 的语法扩展，用于描述 UI 界面。JSX 语法类似于 HTML，但它是 JavaScript 的语法糖，可以直接在 JavaScript 代码中编写 UI 组件。本章节将介绍 JSX 语法的基础知识，以及 React Native 中常用的基础组件。

1. JSX 语法简介

JSX (JavaScript XML) 是 React 引入的一种语法扩展，允许开发者在 JavaScript 代码中直接编写类似 HTML 的标签，从而更直观地描述 UI 结构。

JSX 的特点：

• 声明式语法： 开发者可以直观地描述 UI 的结构和样式。
• 与 JavaScript 混用： 可以在 JSX 中嵌入 JavaScript 表达式，使用花括号 {} 包裹。
• 组件化： JSX 用于定义 React 组件，组件可以嵌套组合，构建复杂的 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 标签，分别对应 React Native 的 View 和 Text 组件。{name} 是一个 JavaScript 表达式，用于动态渲染变量值。

注意事项：

• JSX 标签必须正确闭合。
• 组件名称首字母必须大写，例如 <View> 而不是 <view>。
• JSX 中不能使用 class 属性，应使用 className（在 React 中）或 style（在 React Native 中）代替。

2. React Native 基础组件

React Native 提供了丰富的内置组件，用于构建移动应用的 UI。以下是一些常用的基础组件：

2.1 View

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

示例：

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

2.2 Text

<Text> 组件用于显示文本内容。

示例：

<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="请输入内容"onChangeText={(text) => setText(text)}
/>

2.5 ScrollView

<ScrollView> 组件用于可滚动的视图。

示例：

<ScrollView><Text>内容1</Text><Text>内容2</Text><Text>内容3</Text>{/* 更多内容 */}
</ScrollView>

2.6 FlatList

<FlatList> 组件用于高性能的列表渲染，适用于长列表。

示例：

const data = [{ id: '1', title: 'Item 1' },{ id: '2', title: 'Item 2' },// 更多数据
];<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 方法渲染列表数据。

示例：

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

3.3 样式传递

可以通过 props 传递样式，实现组件样式的动态调整。

示例：

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

4. 综合示例

以下是一个综合示例，展示了如何使用 JSX 和基础组件构建一个简单的登录页面。

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;

总结

本章节介绍了 JSX 语法的基础知识和 React Native 中常用的基础组件。通过学习 JSX 语法，学员可以更直观地描述 UI 结构，并结合 React Native 组件构建复杂的移动应用界面。

课后作业

1. 练习使用 JSX 语法，编写一个简单的组件，展示不同的 UI 元素。
2. 熟悉 React Native 基础组件的使用，尝试实现一个包含文本、图片、输入框和按钮的页面。
3. 阅读 React Native 官方文档，深入了解其他常用组件和属性。

导师指导