React native 导航不适用于嵌套较深的组件!找不到解决办法?

React native 导航不适用于嵌套较深的组件!找不到解决办法?,react-native,React Native,超长且详细的帖子。我尽量不错过任何东西。 我有一个嵌套很深的屏幕,单击时不会显示 TL,DR:当我从一个全局帖子平面列表[flatlist 1]中点击一个用户名时,我会看到一个配置文件模式和另一个被点击用户帖子的平面列表[flatlist 2]。但是,当单击平面列表2中的帖子时,不会显示详细信息屏幕 当我从第一个平面列表(而不是第二个嵌套平面列表)中单击帖子时,会显示帖子详细信息屏幕。我猜这是一个导航问题 结构如下: Home Screen | |----------Is a co

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

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

TL,DR:当我从一个全局帖子平面列表[flatlist 1]中点击一个用户名时,我会看到一个配置文件模式和另一个被点击用户帖子的平面列表[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
这就是我遇到问题的地方

这是不寻常的,因为我对全球帖子的Flatlist1做了同样的事情

那么有什么不同呢? 我想要的屏幕嵌套在模态和第二个平面列表中。我将导航道具从第一个平面列表单元格传递,并将导航道具从模态组件传递到第二个平面列表

模态分量:

 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
     ) 
 }
构造函数(道具){
超级(道具);
此.state={
showProfileModal:false,
孤岛加载:是的,

导航:this.props.navigation,我解决了问题。当我在第二个平面列表中单击帖子时,模态没有被隐藏。模态显示在帖子上方。

我解决了问题。当我在第二个平面列表中单击帖子时,模态没有被隐藏。模态显示在帖子上方。

我知道你的意思,我觉得我也犯错误的时候很傻。但你不需要为此痛打自己:)@cigien干杯!我知道你的意思,我也犯错误的时候很傻。但是你不需要为此痛打自己:)@cigien干杯!
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>   
    )
 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
        }}/>