React Native中this.props.navigation不生效无法跳转详情页问题求助

1. 最直接的触发原因：点击事件未执行跳转函数 #

你在BookItem组件中给TouchableOpacity绑定的事件写法有误：

<TouchableOpacity onPress={() => onPressHandler}>

上述代码仅返回了onPressHandler函数的引用，并未实际执行该函数，正确写法有两种：

• 直接传递函数引用：

<TouchableOpacity onPress={onPressHandler}>

• 箭头函数包裹执行（后续需要传参时推荐用这种）：

<TouchableOpacity onPress={() => onPressHandler()}>

2. 潜在的navigation prop丢失问题 #

你在Stack导航中注册的首个路由组件是Tabs，如果BookListingScreen是嵌套在Tab导航内的子页面，没有直接注册为Stack.Screen的组件，默认无法直接获取navigation属性。如果修复上述点击事件后仍无法跳转，可以用以下两种方案解决：

• 使用withNavigation高阶组件包装BookListingScreen：

import { withNavigation } from '@react-navigation/compat';
// 导出时改为
export default withNavigation(BookListingScreen);

• 如果是函数组件可直接使用useNavigationHook获取导航实例。

3. 其他代码瑕疵（不直接影响跳转，但建议修复） #

3.1 FlatList renderItem参数写法错误 #

你在BookList组件中的renderItem写法有误：

renderItem={({item} = this.props.books) => {

renderItem的入参是包含item、index的回调参数对象，不能设置默认值为this.props.books，改为：

renderItem={({item}) => {

3.2 初始路由名不匹配 #

你设置的Stack导航初始路由名initialRouteName={'BookListing'}和你注册的第一个Screen的name属性name="Book List"不一致，如果你的Tab导航未单独配置初始路由，可能会导致启动时路由匹配异常。

后续传参扩展方案 #

如果你需要携带书籍数据跳转到详情页，修改对应代码即可：

1. BookItem中传递当前书籍item：

<TouchableOpacity onPress={() => onPressHandler(this.props.item)}>

2. BookListingScreen中接收参数并传递给详情页：

onPressHandler = (book) => {
  this.props.navigation.navigate('BookDetailScreen', {
    bookDetail: book
  });
};

3. BookDetail页面通过this.props.route.params.bookDetail即可获取传递的书籍数据。

内容的提问来源于stack exchange，提问作者user16861088