React native 通过抽屉导航器中的StackNavigator将数据从一页传递到另一页

对于一个爱好项目，我正在开发一个应用程序，我的朋友可以在其中查看我们计划的团体活动。每当有人按下某个事件时，我都希望显示一个屏幕，显示该特定事件的详细信息。所以我想从显示事件平面列表的EventScreen转到EventDetailScreen。它需要显示一个特定的事件

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

我尝试了几种方式将事件作为参数发送。但我不知道下一步该怎么办。我读过一些关于需要将数据从抽屉导航器传递到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);

//所有屏幕的导航抽屉结构
类导航抽屉结构扩展组件{
//带有Donute按钮的顶部导航标题
toggleDrawer=（）=>{
//打开/关闭抽屉的道具
this.props.navigationProps.toggleDrawer（）；
};
render（）{
返回(
);
}
}
//导航抽屉第一个选项的堆栈导航器
const主屏幕_StackNavigator=createStackNavigator({
//第一个选项中的所有屏幕都将在此处索引
主屏幕：{
屏幕：主屏幕，
导航选项：（{navigation}）=>({
头左：，
头型：{
背景颜色：“#000”，
},
}),
},
});
//导航抽屉第二个选项的堆栈导航器
const EventsScreen\u StackNavigator=createStackNavigator({
//第二个选项中的所有屏幕都将在此处索引
事件筛选：{
屏幕：EventsScreen，
导航选项：（{navigation}）=>({
头左：，
头型：{
背景颜色：“#000”，
},
}),
},
});
//导航抽屉第三个选项的堆栈导航器
const CalendarScreen\u StackNavigator=createStackNavigator({
//第三个选项中的所有屏幕都将在此处索引
日历屏幕：{
屏幕：日历屏幕，
导航选项：（{navigation}）=>({
头左：，
头型：{
背景颜色：“#000”，
},
}),
},
});
//导航抽屉第四个选项的堆栈导航器
const PollScreen_StackNavigator=createStackNavigator({
//第三个选项中的所有屏幕都将在此处索引
PollScreen：{
屏幕：PollScreen，
导航选项：（{navigation}）=>({
头左：，
头型：{
背景颜色：“#000”，
},
}),
},
});
//导航抽屉第五个选项的堆栈导航器
const InfoScreen_StackNavigator=createStackNavigator({
//第三个选项中的所有屏幕都将在此处索引
信息屏幕：{
屏幕：信息屏幕，
导航选项：（{navigation}）=>({
头左：，
头型：{
背景颜色：“#000”，
},
}),
},
});
//导航抽屉的EventDetail屏幕的堆栈导航器
const EventDetailScreen\u StackNavigator=createStackNavigator({
//第三个选项中的所有屏幕都将在此处索引
EventDetail屏幕：{
屏幕：EventDetailScreen，
导航选项：（{navigation}）=>({
头左：，
头型：{
背景颜色：“#000”，
},
}),
},
});
const DrawerMenu=createDrawerNavigator(
{
主屏幕：{
屏幕：主屏幕\u StackNavigator，
},
事件筛选：{
屏幕：EventsScreen\u StackNavigator，
},
日历屏幕：{
屏幕：CalendarScreen\u StackNavigator，
},
PollScreen：{
屏幕：PollScreen_StackNavigator，
},
信息屏幕：{
屏幕：InfoScreen_StackNavigator，
},
EventDetail屏幕：{
屏幕：EventDetailScreen\u StackNavigator，
},
},
{
//在这里定义自定义组件
contentComponent:CustomSidebarMenu，
抽屉宽度：300，
DroperBackgroundColor:'rgba（0,0,0,0.6）'//或'rgba（0,0,0,0）'
}
);
const styles=StyleSheet.create({
menuIcon：{
marginLeft:15，
},
});
导出默认createAppContainer（抽屉菜单）；

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>
      );
    }
  }
}

class EventsScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：是的，
数据源：null，
刷新：错，
};
}
异步组件didmount（）{
const events=await ajax.FetchEvents（）；
这是我的国家({
孤岛加载：false，
数据源：事件，
刷新：错，
});
}
handleRefresh=（）=>{
这是我的国家(
{
刷新：错，
},
() => {
this.componentDidMount（）；
}
);
};
itemCard（{item}）{
const{navigate}=this.props.navigation；
返回(
导航（'EventDetailScreen'{
数据：'测试'，
})
}>
{item.title}
{item.description}
位置
{item.date}
);
}
render（）{
if（此.state.isLoading）{
返回(
);
}否则{
返回(
this.itemCard（{item}）}
keyExtractor={item=>item.id.toString（）}
onRefresh={（）=>this.handleRefresh（）}
刷新={this.state.refreshing}
/>
);
}
}
}

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;  

class EventDetailScreen扩展组件{
render（）{
让item=this.props.navigation.getParam（'data'，'NO-data'）；
返回(
{item}
);
}
}
导出默认EventDetail屏幕；

每当我点击一个事件时，EventDet

this.props.navigation.navigate('Filter', {
        uri: this.state.uri,
    });

  const { navigation } = this.props;

    const uri = navigation.getParam('uri');
    console.log('url', uri);
    this.setState({ uri: uri });