React Native 实战诗词 App：项目基础构建

React Native（RN）是一个强大的框架，可用于构建移动应用程序。在这个项目中，我们将逐步使用 RN 构建一个功能齐全的“诗词墨客”App。

项目基础

1. 环境设置

• 安装 Node.js（v16+）和 npm（v7+）
• 创建项目目录并执行：

npx react-native init MyPoetryApp
cd MyPoetryApp

2. 安装依赖项

npm install react-native-elements react-native-vector-icons axios

• react-native-elements： 提供样式组件
• react-native-vector-icons： 提供图标库
• axios： 用于与远程 API 通信

3. 布局结构

创建以下文件夹和文件：

• screens/： 放置应用程序屏幕
• components/： 放置自定义组件
• App.js： 根应用程序文件
• App.styles.js： 应用程序样式文件

App 基础代码

在 App.js 中添加以下代码：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './screens/Home';
import DetailScreen from './screens/Detail';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

首页

创建 screens/Home.js，添加以下代码：

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import axios from 'axios';

const API_URL = 'https://example.com/api/poems';

const HomeScreen = () => {
  const [poems, setPoems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPoems = async () => {
      const response = await axios.get(API_URL);
      setPoems(response.data);
      setLoading(false);
    };

    fetchPoems();
  }, []);

  const renderItem = ({ item }) => {
    return (
      <View style={{ borderWidth: 1, margin: 10, padding: 10 }}>
        <Text style={{ fontSize: 18 }}>{item.title}</Text>
        <Text style={{ fontSize: 14 }}>{item.author}</Text>
        <Text style={{ fontSize: 12 }}>{item.content}</Text>
      </View>
    );
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {loading ? <Text>Loading...</Text> : (
        <FlatList
          data={poems}
          renderItem={renderItem}
          keyExtractor={item => item.id}
        />
      )}
    </View>
  );
};

export default HomeScreen;

详情页

创建 screens/Detail.js，添加以下代码：

import React from 'react';
import { View, Text } from 'react-native';

const DetailScreen = ({ route }) => {
  const { item } = route.params;

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 18 }}>{item.title}</Text>
      <Text style={{ fontSize: 14 }}>{item.author}</Text>
      <Text style={{ fontSize: 12 }}>{item.content}</Text>
    </View>
  );
};

export default DetailScreen;