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