使用 React Native Expo 搭建更真实的应用程序

2023-10-02 07:56:53

让我们告别枯燥的演示，踏入 React Native Expo 的一个更实际的应用世界！

踏上构建之路

关键词：

我们的应用程序将由两个页面组成：一个列出书目的列表页面和一个显示选定书目详细信息的详情页面。

列表页面

在列表页面，我们将显示书目清单，包括标题、作者和时间。点击列表中的任何项目都将带您进入详情页面。

// 列表页面代码
import React, { useState } from 'react';
import { View, Text, FlatList } from 'react-native';

const BookList = () => {
  const [books, setBooks] = useState([
    { id: 1, title: 'Book 1', author: 'Author 1', time: '2023-01-01' },
    { id: 2, title: 'Book 2', author: 'Author 2', time: '2023-02-01' },
    { id: 3, title: 'Book 3', author: 'Author 3', time: '2023-03-01' },
  ]);

  return (
    <View>
      <FlatList
        data={books}
        renderItem={({ item }) => <Text>{item.title}</Text>}
        keyExtractor={item => item.id}
      />
    </View>
  );
};

export default BookList;

详情页面

当用户点击列表页面中的书目时，他们将被带到详情页面。该页面将显示该书目的所有详细信息，例如标题、作者、时间、等。

// 详情页面代码
import React from 'react';
import { View, Text } from 'react-native';

const BookDetails = ({ route }) => {
  const { book } = route.params;

  return (
    <View>
      <Text>{book.title}</Text>
      <Text>{book.author}</Text>
      <Text>{book.time}</Text>
      <Text>{book.description}</Text>
    </View>
  );
};

export default BookDetails;

// App.js 代码
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="BookList" component={BookList} />
        <Stack.Screen name="BookDetails" component={BookDetails} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;