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> 组件用于显示图片。

示例：

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

2.4 TextInput

<TextInput> 组件用于用户输入文本。

示例：

<TextInput
  style={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' },
  // 更多数据
];

<FlatList
  data={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}>
      <Image
        source={{ uri: 'https://example.com/logo.png' }}
        style={styles.logo}
      />
      <Text style={styles.title}>登录</Text>
      <TextInput
        style={styles.input}
        placeholder="用户名"
        value={username}
        onChangeText={(text) => setUsername(text)}
      />
      <TextInput
        style={styles.input}
        placeholder="密码"
        secureTextEntry
        value={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 组件构建复杂的移动应用界面。

课后作业

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

导师指导

在这里插入图片描述