Faith & Code | Reflections by Errong

React Native 导航模式：为共享页面使用全局 Stack 在许多 React Native 应用中，你可能希望从多个 Tab 打开同一个页面（如 Article 或 Details ），并且希望返回按钮能回到正确的 Tab。如果你只是把页面放在某个 Tab 的 Stack 里，会遇到一个常见的 UX 问题：返回按钮总是回到该 Stack 的根页面，而不是你来时的 Tab。 问题描述 假设你有一个包含 Home 、 Study 和 Mastery 的 Tab Navigator。如果你把 ArticleScreen 放在 Home 的 Stack 里，并从 Study 或 Mastery 跳转到它，返回按钮总是回到 Home ，而不是你来时的 Tab。这是因为导航栈是 Tab 局部的。 解决方案：使用全局 Stack 最佳实践是创建一个 RootStack ，把 Tab Navigator 和所有共享页面包裹起来。这样，任何 Tab 都可以 push 共享页面，返回按钮会回到正确的 Tab。 步骤 1：定义 Root Stack import { createNativeStackNavigator } from '@react-navigation/native-stack'; import TabNavigator from './TabNavigator'; import ArticleScreen from './ArticleScreen'; const RootStack = createNativeStackNavigator(); export default function AppNavigator() { return ( <RootStack.Navigator> <RootStack.Screen name=\"Main\" component={TabNavigator} options={{ headerShown: false }} /> <Roo...

React Native Navigation Pattern: Global Stack for Shared Screens In many React Native apps, you’ll want to open a screen (like an Article or Details page) from multiple tabs, and have the back button return to the correct previous tab. If you simply nest your screen inside a stack for one tab, you’ll run into a common UX issue: the back button always returns to the root of that stack, not to the tab you came from. The Problem Suppose you have a tab navigator with Home , Study , and Mastery tabs. If you put ArticleScreen inside the Home stack, and navigate to it from Study or Mastery , the back button will always return to Home —not the tab you came from. This is because the navigation stack is local to the tab. The Solution: Use a Global Stack The best practice is to create a RootStack that wraps your tab navigator and any shared screens. This way, any tab can push the shared screen, and the back button will return to the correct previous tab...

解决 React Native Modal 中 ScrollView 无法滚动的问题（最佳 Modal 结构） 在使用 React Native 开发应用时，一个很常见的问题是： 在 Modal 组件中放入 ScrollView ， 虽然滚动条显示出来了，但内容却无法正常滚动。 很多开发者会发现，Modal 打开后 ScrollView 看起来是可以滚动的， 但是手指滑动时内容却几乎不动，或者滚动非常困难。 这个问题通常是因为 Modal 的 Overlay 层拦截了触摸事件 。 如果 Overlay 使用 TouchableOpacity 或 Pressable 并包裹整个 Modal 内容， 那么滚动手势会被 Overlay 捕获，从而导致 ScrollView 无法接收到滚动事件。 问题示例 很多项目中的 Modal 结构通常像这样： <TouchableOpacity style={styles.overlay} onPress={onClose}> <TouchableOpacity style={styles.modal}> <ScrollView> ... </ScrollView> </TouchableOpacity> </TouchableOpacity> 在这种结构下，最外层的 TouchableOpacity 会捕获触摸手势。当用户尝试滚动时， 触摸事件会先被 Overlay 处理，从而阻止 ScrollView 的滚动行为。 结果就是： 滚动条存在，但滚动不流畅甚至无法滚动。 正确的 Modal 结构模式 正确的解决方案是： 不要用 Touchable 包裹整个 Modal ， 而是将 背景点击区域 与 Modal 内容区域 分离。 我们可以在背景上放一个独立的 Pressable， 用于点击关闭 Modal，而 Modal 内容本身保持普通 View。 <Modal visible={visible} transparent animationType="fade" onRequestClose={onC...