Expo 这个文档写的非常好。通俗易懂。细节也到位。强烈推荐。甚至比 React Native 国内的书籍要好很多。
https://docs.expo.dev/tutorial/introduction/
一共分9个小节, 把 react native 的基础概念都覆盖到了：
- Create your first app
- Add navigation
- Build a screen
- Use an image picker
- Create a modal
- Add gestures
- Take a screenshot
- Handle platform differences
- Configure status bar, splash screen and app icon
业余时间在手机上看完了文档，并整理到了手机笔记上，下面是对我有用的一些知识点：
npm run reset-project
这个命令非常实用，因为默认创建的代码，默认的两个 tab 改起来非常麻烦。直接通过这个命令就能重置代码：
Let's run the reset-project script to remove the boilerplate code， previous files from app and other directories (components, constants, and hooks — containing boilerplate code) are moved inside the app-example directory by the script. We'll create our own directories and component files as we go along.
Root layout
The app/_layout.tsx file. It defines shared UI elements such as headers and tab bars so they are consistent between different routes.
icons
Import Ionicons icons set from @expo/vector-icons — a library that includes popular icon sets.
本地图片的使用方法
在写聊天 app 的过程中，摸索了半天导入本地图片的方法，没想到在这里看到里详细的说明：
We'll use expo-image library to display the image in the app. It provides a cross-platform image component to load and render an image.
npx expo install expo-image
代码：
import { Image } from 'expo-image';
const PlaceholderImage = require('@/assets/images/background-image.png');
button
React Native includes a few different components for handling touch events, but
is recommended for its flexibility. It can detect single taps, long presses, trigger separate events when the button is pushed in and released, and more.
平台判断
showsHorizontalScrollIndicator={Platform.OS === 'web'}
react native 中 FlatList 的使用场景
当需要展示大量的数据列表时，比如在一个电商应用中展示商品列表、社交应用中展示动态列表或者新闻应用中展示新闻列表等。FlatList可以高效地渲染这些长列表，它只会渲染当前屏幕上可见的元素以及少量的缓冲区元素，这样可以节省内存和提高性能。
类似于 android 中的 RecyclerView
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式