通过DrawerNavigator中的StackNavigator将数据从一页传递到另一页

Question

对于一个业余爱好项目，我正在构建一个应用程序，我的朋友可以在其中查看我们计划的小组活动。每当有人按下某个事件时，我都想显示一个屏幕，其中包含有关该特定事件的详细信息。所以我想从显示带有事件的FlatList的EventScreen转到EventDetailScreen。需要显示一个特定事件。

到目前为止，我已经使导航部分正常工作，但是我无法将任何数据传递到下一个屏幕...

我已尝试通过多种方式将事件发送为参数。但是我不知道下一步该怎么做。我已经读过一些有关需要将数据从DrawerNavigator传递到StackNavigator的信息，但是当我尝试这样做时，出现一个错误，提示我需要在AppContainer中定义导航。

// MenuNavigator.js

//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component 
//Top Navigation Header with Donute Button
toggleDrawer = () => 
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
;
render() 
    return (
        <View style= flexDirection: 'row' >
            <TouchableOpacity onPress=this.toggleDrawer.bind(this)>
                <Ionicons name="md-menu" color='white' size=32 style=styles.menuIcon/>
            </TouchableOpacity>
        </View>
    );



//Stack Navigator for the First Option of Navigation Drawer
const HomeScreen_StackNavigator = createStackNavigator(
//All the screen from the First Option will be indexed here
HomeScreen: 
    screen: HomeScreen,
    navigationOptions: ( navigation ) => (
        headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
        headerStyle: 
            backgroundColor: '#000',
        ,
    ),
,
);

//Stack Navigator for the Second Option of Navigation Drawer
const EventsScreen_StackNavigator = createStackNavigator(
//All the screen from the Second Option will be indexed here
EventsScreen: 
    screen: EventsScreen,
    navigationOptions: ( navigation ) => (
        headerLeft: <NavigationDrawerStructure navigationProps=navigation/>,
        headerStyle: 
            backgroundColor: '#000',
        ,
    ),
,
);

//Stack Navigator for the Third Option of Navigation Drawer
const CalendarScreen_StackNavigator = createStackNavigator(
//All the screen from the Third Option will be indexed here
CalendarScreen: 
    screen: CalendarScreen,
    navigationOptions: ( navigation ) => (
        headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
        headerStyle: 
            backgroundColor: '#000',
        ,
    ),
,
);

//Stack Navigator for the Fourth Option of Navigation Drawer
const PollScreen_StackNavigator = createStackNavigator(
//All the screen from the Third Option will be indexed here
PollScreen: 
    screen: PollScreen,
    navigationOptions: ( navigation ) => (
        headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
        headerStyle: 
            backgroundColor: '#000',
        ,
    ),
,
);

//Stack Navigator for the Fifth Option of Navigation Drawer
const InfoScreen_StackNavigator = createStackNavigator(
//All the screen from the Third Option will be indexed here
InfoScreen: 
    screen: InfoScreen,
    navigationOptions: ( navigation ) => (
        headerLeft: <NavigationDrawerStructure navigationProps=navigation />,
        headerStyle: 
            backgroundColor: '#000',
        ,
    ),
,
);

//Stack Navigator for the EventDetailScreen of Navigation Drawer
const EventDetailScreen_StackNavigator = createStackNavigator(
//All the screen from the Third Option will be indexed here
EventDetailScreen: 
    screen: EventDetailScreen,
    navigationOptions: ( navigation ) => (
        headerLeft: <NavigationDrawerStructure navigationProps=navigation/>,
        headerStyle: 
            backgroundColor: '#000',
        ,
    ),
,
);

const DrawerMenu = createDrawerNavigator(
HomeScreen: 
    screen: HomeScreen_StackNavigator
,
EventsScreen: 
    screen: EventsScreen_StackNavigator
,
CalendarScreen: 
    screen: CalendarScreen_StackNavigator
,
PollScreen: 
    screen: PollScreen_StackNavigator
,
InfoScreen: 
    screen: InfoScreen_StackNavigator
,
EventDetailScreen: 
    screen: EventDetailScreen_StackNavigator

, 
// define customComponent here
contentComponent: CustomSidebarMenu,
drawerWidth: 300,
drawerBackgroundColor : 'rgba(0,0,0,0.6)', // or 'rgba(0,0,0,0)'
);

const styles = StyleSheet.create(
menuIcon: 
    marginLeft: 15

);

export default createAppContainer(DrawerMenu);

// Events.js

class EventsScreen extends Component 
constructor(props) 
    super(props);
    this.state = 
        isLoading: true,
        dataSource: null,
        refreshing: false,
    


async componentDidMount () 
    const events = await ajax.FetchEvents();
    this.setState(
        isLoading: false,
        dataSource: events,
        refreshing: false,
    )


handleRefresh = () => 
    this.setState( 
        refreshing: false,
    , () => 
        this.componentDidMount();
        )
;

itemCard(item) 
    const navigate = this.props.navigation;
    return(
        <TouchableWithoutFeedback onPress=() =>
                navigate('EventDetailScreen', 
                    data: 'test'
                )
            
        >
            <View style=styles.card>
                <View style=styles.item>
                    <Text style=styles.title>item.title</Text>
                    <Text numberOfLines=1 style=styles.desc>item.description</Text>
                    <View style=styles.row>
                        <View style=styles.iconColumn>
                            <Ionicons name="md-home" color='white' size=24/>
                        </View>
                        <View style=styles.textColumn>
                            <Text style=styles.location>location</Text>
                        </View>
                    </View>
                    <View style=styles.row>
                        <View style=styles.iconColumn>
                            <Ionicons name="md-calendar" color='white' size=24/>
                        </View>
                        <View style=styles.textColumn>
                            <Text style=styles.date>item.date</Text>
                        </View>
                    </View>
                </View>
            </View>
        </TouchableWithoutFeedback>
    )


render() 
    if (this.state.isLoading) 
        return (
            <View style=styles.container>
                <ActivityIndicator />
            </View>
        )
     else 
        return (
            <View style=styles.container>
                <FlatList
                    data=this.state.dataSource
                    renderItem=( item ) => this.itemCard(item)
                    keyExtractor=item => item.id.toString()
                    onRefresh=() => this.handleRefresh()
                    refreshing=this.state.refreshing
                />
            </View>
        );

// EventDetailScreen.js

class EventDetailScreen extends Component 

render() 
    let item = this.props.navigation.getParam('data', 'NO-DATA');

    return (
        <View>
            <Text>item</Text>
        </View>
    )



export default EventDetailScreen;

[每当我单击一个事件时，EventDetailScreen都会说'NO-DATA'，因为该项目未定义。我的意图是将事件（用户单击）传递到下一个屏幕。因此，我可以使用该特定事件的标题，描述等。

而且，我知道代码有点混乱。我是React-Native的新手，这是我的第一个应用程序（也是第一篇文章），所以有很多改进的地方：）

提前感谢！