导航不适用于深度嵌套组件！找不到解决方案

Question

超长且详细的帖子。我尽量不错过任何东西

我有一个嵌套很深的屏幕，单击时不会显示。

TL，DR：当我从全局帖子列表[Flatlist1]中单击用户名时，我会看到一个配置文件模态和另一个被单击用户帖子的列表[flatlist 2]。然而，当点击平面列表2中的帖子时，不会显示详细信息屏幕。

当我从第一个平面列表中单击帖子时，会显示帖子详细信息屏幕，而不是从第二个嵌套的平面列表中。我猜这是导航问题。

结构如下：

Home Screen 
|
|----------Is a container for a Flatlist
|
Flatlist of Global Posts
|
|----------This flatlist displays all Global Posts
|
Post
|
|----------Each post contains the poster's Username, which is clickable
|----------Each post is clickable, and opens up the post details screen
|----------This works fine!
|
Poster's Username
|
|----------When clicked, opens a Profile Modal of the poster's information
|
Poster's Profile Modal
|
|----------The modal contains the user's profile information, and another Flatlist
|
2nd Flatlist
|
|----------This flatlist is only the specific clicked users Posts
|
Post
|
|----------When a specific post is clicked, it should open a post details screen
|----------However, it is not opening up the post details screen
|
Post Details Screen

这就是我遇到问题的地方。

这很不寻常，因为我为全球帖子的Flatlist 1做了同样的事情。

那么有什么不同呢？我想要的屏幕嵌套在模态和第二个平面列表中。我将导航道具从第一个平面主义单元传递，并将导航道具由模态分量传递给第二个平面主义。

模态组件：

constructor(props) {
super(props);
this.state = {
showProfileModal: false,
isLoading: true,
navigation: this.props.navigation, <-------- navigation from the first flatlist cell
isFollowing: false
}
....
render() {
return (
<ClickedUserPostFeed navigation = {this.state.navigation} [other params] /> <---- Passing navigation to the second flatlist here
) 
}

在ClickedUserPostFeed[第二平面列表]中：

constructor(props) {
super(props);
this.state = {
isLoading: true,
userPostsArray: [],
clickedUserUID: this.props.clickedUserUID,
navigation: this.props.navigation <---------- Got Navigation from modal component
};
.....

render() {
const { navigation } = this.props;
const renderItem = ({ item }) => (
<ClickedUserPostCell 
//Other params
navigation={navigation} <---------- Passing navigation to the cell component
cost_basis={item.cost_basis}
/>
);

if(this.state.isLoading){
return(
<View style={styles.container}>
<ActivityIndicator size="large" color="#9E9E9E"/>
</View>
)
}    
return (
<View style={styles.container}>
<FlatList
data={this.state.userPostsArray}
renderItem={renderItem}
keyExtractor={item => item.key}
/>
</View>   
)

在ClickedUserPostCell:中

constructor(props) {
super(props)
this.state = {
//Other params
navigation: this.props.navigation, <---------- Getting navigation
isLoading: false,
currentUser: Firebase.auth().currentUser.uid,
}
}
...
showPostPage = () => {
this.props.navigation.navigate('ClickedPostPageUser',  <------------ This isn't working
{
//Params here
})
}

我还尝试将所有内容添加到堆栈中：

<Stack.Screen name="Cell"  <------------------ the first flatlist cells 
component={FeedCellClass}
options=  {{
headerLeft: null
}}/>
<Stack.Screen name="ClickedUserPostCell"  <---------- the second flatlist cells (poster posts)
component={ClickedUserPostCell}
options=  {{
headerLeft: null
}}/>

<Stack.Screen name="ClickedUserPostFeed" <---------- the second flatlist itself
component={ClickedUserPostFeed}
options=  {{
headerLeft: null
}}/>
<Stack.Screen name="ClickedPostPageUser" <----------- the details screen I want to show
component={ClickedPostPageUser}
options=  {{
title: "post details",
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 24,
},
headerLeft: null
}}/>

我知道，直到第一个平面列表，导航工作正常，因为我能够使用this.props.navigation.navigation并显示正确的详细信息屏幕。第二个平面主义者没有正确接收导航，或者可能是其他问题。我没有从控制台收到任何警告或错误，但当从用户配置文件模式单击时，不会显示帖子的详细信息。

提前感谢，如果您需要更多信息/代码/澄清，请告诉我。

Answer 1

我解决了这个问题。当我点击第二个平面列表中的帖子时，模态并没有被隐藏。模态显示在帖子上。