如何使用 React-Native 和 Expo 在几分钟内创建一个 Dailynow 移动应用
作为一名开发者，您可能想了解技术领域的最新动态。我推荐一款非常实用的 Chrome/Firefox 扩展程序Dailynow。您需要安装此扩展程序才能快速获取 API URL。在本教程中，我们将使用 React Native 和 Expo SDK/平台创建一个非常简单的 Dailynow 移动应用。我已为本教程创建了一个GitHub 代码库。
我们首先要做的是创建一个Expo 帐户并下载 Expo 客户端移动应用程序。Play Store | App Store。
您现在可以登录展会客户端移动应用程序。
您现在可以创建应用程序了！
打开终端，全局安装 expo-cli，创建一个 expo 项目，并使用同一个 expo 帐户登录到 expo-cli。
> yarn global add expo-cli or npm install expo-cli -g
> expo init
> expo login
选择空白（托管工作流程）模板。
应用程序目录应该如下所示。
将当前文件的内容替换App.js为以下内容
import React from "react";
import { StatusBar, View, Text } from "react-native";
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<View style={{ marginTop: 20 }}>
<Text>App content</Text>
</View>
</>
);
};
export default App;
返回终端，运行程序yarn start or npm run start，用手机扫描二维码打开应用程序。
您也可以使用 Expo Client 移动应用程序打开应用程序，可以在“项目”选项卡中看到正在运行的应用程序（您的手机和计算机必须在同一网络中）。
锵锵！现在，你应该能在手机上看到你的应用程序正在运行了。
现在，我们将修改代码以显示博客文章列表。打开App.js文件并添加一个 FlatList 组件，并放入一些虚拟数据。
import React from "react";
import { StatusBar, View, Text, FlatList, Image } from "react-native";
const data = [
{
id: "dd05fda7784c5943b08b45f438aafb51",
title: "AI Generated Human Photo Database (with API Access)",
url: "https://redstapler.co/ai-generated-human-photo/",
publishedAt: "2020-02-10T09:42:28.000Z",
image:
"https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/1c8f48d32e75aa526cd4562928e46569",
tags: ["javascript", "ai", "others"]
},
{
id: "37b887d2ad3e5f79834e7555c49fec49",
title: "Take 'this' Quiz, Understand How 'this' Works in JavaScript",
url:
"https://dev.to/liaowow/take-this-quiz-understand-how-this-works-in-javascript-44dj",
publishedAt: "2020-02-09T21:28:29.000Z",
image:
"https://res.cloudinary.com/daily-now/image/upload/f_auto,q_auto/v1/posts/1110f8e9b4c54f5e0291c95da5171d00",
tags: ["javascript", "beginners", "challenge"]
}
];
const App = () => {
const handleKeyExtractor = item => item.id.toString();
return (
<>
<StatusBar barStyle="dark-content" />
<View style={{ marginTop: 20 }}>
<FlatList
data={data}
renderItem={({ item }) => (
<View style={{ flexDirection: "row", padding: 15 }}>
<Image
source={{ uri: item.image }}
style={{ width: 80, height: 80 }}
/>
<View style={{ flex: 1, paddingLeft: 10 }}>
<Text
style={{ fontSize: 16, fontWeight: "300" }}
numberOfLines={2}
ellipsizeMode="tail"
>
{item.title}
</Text>
</View>
</View>
)}
/>
</View>
</>
);
};
export default App;
您的应用将自动重新加载，现在应该看起来像这样
Dailynow 数据
在浏览器中打开 Dailynow 标签页，并打开 Chrome/Firefox 开发者工具（网络选项卡）。刷新页面，并将https://.../graphql?...请求 URL 复制到剪贴板。此请求将允许我们使用您的个人标签从 Dailynow API 获取数据。
App.js现在，您可以在 useEffect hook 中获取数据并将响应存储在状态中。
import React, { useEffect, useState } from "react";
import { StatusBar, View, Text, FlatList, Image } from "react-native";
const App = () => {
const handleKeyExtractor = item => item.id.toString();
const [data, setData] = useState();
useEffect(() => {
(async () => {
const response = await fetch(
"PASTE_REQUEST_URL"
);
const result = await response.json();
setData(result.data.latest);
})();
}, []);
return (
<>
<StatusBar barStyle="dark-content" />
<View style={{ marginTop: 20 }}>
<FlatList
data={data}
renderItem={({ item }) => (
<View style={{ flexDirection: "row", padding: 15 }}>
<Image
source={{ uri: item.image }}
style={{ width: 80, height: 80 }}
/>
<View style={{ flex: 1, paddingLeft: 10 }}>
<Text
style={{ fontSize: 16, fontWeight: "300" }}
numberOfLines={2}
ellipsizeMode="tail"
>
{item.title}
</Text>
</View>
</View>
)}
/>
</View>
</>
);
};
export default App;
博客文章链接
安装expo-web-browser模块
expo install expo-web-browser
在 props 中添加一个TouchableOpacity组件renderItem。
import React, { useEffect, useState } from "react";
import {
StatusBar,
View,
Text,
FlatList,
Image,
TouchableOpacity
} from "react-native";
import * as WebBrowser from "expo-web-browser";
const App = () => {
const handleKeyExtractor = item => item.id.toString();
const [data, setData] = useState();
useEffect(() => {
(async () => {
const response = await fetch(
"PASTE_REQUEST_URL"
);
const result = await response.json();
setData(result.data.latest);
})();
}, []);
const openPost = async link => {
await WebBrowser.openBrowserAsync(link);
};
return (
<>
<StatusBar barStyle="dark-content" />
<View style={{ marginTop: 20 }}>
<FlatList
data={data}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => openPost(item.url)}>
<View style={{ flexDirection: "row", padding: 15 }}>
<Image
source={{ uri: item.image }}
style={{ width: 80, height: 80 }}
/>
<View style={{ flex: 1, paddingLeft: 10 }}>
<Text
style={{ fontSize: 16, fontWeight: "300" }}
numberOfLines={2}
ellipsizeMode="tail"
>
{item.title}
</Text>
</View>
</View>
</TouchableOpacity>
)}
/>
</View>
</>
);
};
export default App;
就是这样！现在来看看这个应用程序。
这个应用程序可以很快地添加很多功能：
- 刷新
- 无限滚动
- 深色模式
- 标签设置
- 书签
我为本教程创建了一个GitHub 代码库，其中包含了一些相关功能。欢迎大家贡献代码！:D
您还可以使用一条命令行发布您的 Expo 应用expo publish。这样，您就可以从任何地方访问该应用。所有已发布的应用都可以在 Expo 客户端移动应用（“个人资料”选项卡）中找到。
感谢dailynow团队的出色工作！
文章来源：https://dev.to/hichamelbsi/how-to-create-a-dailynow-mobile-app-in-few-minutes-with-react-native-and-expo-ne