如何在点击外部文件的TouchableOpacity时用Drawer Navigator切换屏幕？

嘿，这个需求其实很好实现，核心就是让那个独立JS文件里的组件能获取到react-navigation的导航实例，下面是具体步骤：

1. 给独立组件注入导航权限 #

react-navigation提供了withNavigation高阶组件，专门用来给那些不在导航栈直接层级里的组件注入navigation属性。首先打开你那个包含TouchableOpacity的JS文件，导入它：

import { withNavigation } from 'react-navigation';

2. 包裹组件并添加跳转逻辑 #

假设你的组件叫ProfileButton，先在组件里通过props拿到navigation，然后在TouchableOpacity的onPress事件里调用navigate方法跳转到目标路由：

import React from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import { withNavigation } from 'react-navigation';

const ProfileButton = ({ navigation }) => (
  <TouchableOpacity
    style={{ padding: 10, backgroundColor: '#ccc' }}
    onPress={() => {
      // 跳转到Profile页面，路由名称要和你Drawer里定义的完全一致
      navigation.navigate('JsProfile');
    }}
  >
    <Text>切换到Profile</Text>
  </TouchableOpacity>
);

// 用withNavigation包裹组件后导出，这样组件就能拿到navigation了
export default withNavigation(ProfileButton);

3. 确认路由名称匹配 #

一定要保证navigate里的'JsProfile'和你DrawerNavigator中定义的路由名称完全一致，也就是你代码里的这段：

const DrawerExample = DrawerNavigator({
  JsHome : { screen: JsHome },
  JsProfile : { screen: JsProfile }, // 就是这个名称，大小写都要对应
})

备选方案：直接传递navigation属性 #

如果你的TouchableOpacity组件是某个导航屏幕（比如JsHome）的子组件，那你也可以直接把屏幕的navigation属性通过props传递给它，不用withNavigation：
比如在JsHome里使用这个组件：

// JsHome.js
import ProfileButton from './ProfileButton';

const JsHome = ({ navigation }) => (
  <View>
    {/* 直接把navigation传过去 */}
    <ProfileButton navigation={navigation} />
  </View>
);

这种情况下，ProfileButton里的跳转逻辑和之前一样就能生效。

这样操作后，点击那个TouchableOpacity就会直接从Home屏幕切换到Profile屏幕啦～

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