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;