首先，我将所有代码重构为仅使用一种导航器（在这种情况下，将使用react-navigation）。因此，我们将把您的路由器通行代码与

//Your routes screen
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
//... add missing imports

const Stack = createStackNavigator();

//this will be your old router-flux
const Root = () => {
  return (
  <Stack.Navigator>
    <Stack.Screen name="login" component={Login} title="Login" initial/>
    <Stack.Screen name="signup" component={Signup} title="Signup" />
    <Stack.Screen name="home" component={SideMenu} title="HomeScreen" />
  </Stack.Navigator>
 )
} 

const Drawer = () => {
  return (
  <Drawer.Screen 
        name="Home"
        component={HomeScreen}
        options={{ drawerLabel: 'Home' }}
      />
  <Drawer.Screen
        name="Your Activities"
        component={YourActivitiesScreen}
        options={{ drawerLabel: 'Your Activities' }}
      />
  <Drawer.Screen
        name="Your Favourite"
        component={YourFavouriteScreen}
        options={{ drawerLabel: 'Your Favourite' }}
      />
  </Drawer.Navigator>
 )
}

const AppContainer = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Root" component={Root} />
        <Stack.Screen name="Drawer" component={Drawer} />
        //import your Details screen to use inside component
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppContainer

您将使用此AppContainer包装App.js组件。我们刚刚做的是嵌套导航，将首先到达您的Home，而您的抽屉将全部放在同一位置。另外，您的代码中缺少一个堆栈，该堆栈就是Details的堆栈。

在此之后，您将使用react-navigation中的所有操作。所有屏幕都会收到一个navigation道具。要从Root导航后，您将像props.navigation.navigate("Home")一样调用导航。

这同样适用于从FlatList导航到“详细信息”屏幕。

//Your Home Screen
import React,{ Component } from 'react';
import {
    StyleSheet,View,Text,AsyncStorage,TouchableOpacity,FlatList,Button,SafeAreaView
} from 'react-native';

class HomeScreen extends Component{

    constructor(props) {
        super(props);
        this.state = {
            activitiesList: [],}
    };
    renderItem = (item) => {
       return (
         <TouchableOpacity
           onPress={() => {
           props.navigation.navigate("Details",{ data: item })
           console.log('test')

          }}
          >
                <View style={styles.item}>
                  <Text style={styles.title}>{item.name}</Text>
                </View>
              </TouchableOpacity>
            );
          }

    render(){
        const listActivities = this.state.activitiesList

        return (
            <View>
                <View style={styles.container}>
                    <Text style={styles.heading}>UPCOMING ACTIVITIES</Text>
                </View>
                <View>
                    <SafeAreaView>
                        <FlatList
                            data = {listActivities}
                            renderItem={({ item }) => this.renderItem(item)}
                            keyExtractor={item => item.id}
                        />
                    </SafeAreaView>
                </View>
            </View>
        )
    }
}

只需将导航操作添加到上面的代码中。您必须在“详细信息”屏幕中访问params对象

//Details Screen
class DetailsScreen extends React.Component {
  render() {
    const { routes } = this.props;
    return (
      <View>
      //Your component
        <Text>{routes.data.name}</Text>
      </View>
    );
  }
}

请注意。如果导航到嵌套堆栈时遇到问题，可以使用params进行这种导航

navigation.navigate(<YourParent>,{
  screen: <YourDesiredScreen>,params: { <YourObject> },});

我希望至少对您有所帮助。我没有测试过，这就是为什么我要求您将代码上传到Expo。

我使用react-navigation，因此感到更高兴。所有需要的导航都可以通过一个简单的操作完成：

this.props.navigation.navigate('ScreenName',{param1: 'Hello',param2: 'World'})

，然后在所需的屏幕上获取参数：

const { param1,param2 } = this.props.route.params;

更多详细信息here。

当然，如果使用功能组件，则更加容易。