[英]Couldn't find a route object. Is your component inside a screen in a navigator? React Native
I am developing a multi page app using stack navigators in react native.我正在使用堆栈导航器在本机反应中开发一个多页应用程序。 While navigating to different pages, I may/may not pass data, but in some cases like 'Chat' I do pass the userB
data to ChatScreen
which is defined inside the StackNavigator
, so in order to change the Header
of my ChatScreen
to userB
's displayName, I created a custom headerTitle
component for it and passed as a prop in Stack.Screen
.在导航到不同页面时,我可能/可能不会传递数据,但在某些情况下,例如“聊天”,我确实将userB
数据传递给在ChatScreen
中定义的StackNavigator
,因此为了将我的Header
的ChatScreen
更改为userB
' s displayName,我为它创建了一个自定义headerTitle
组件,并在Stack.Screen
中作为 prop 传递。 Below is the code:下面是代码:
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{headerTitle: HomeHeader}}
/>
<Stack.Screen
name="Chat"
component={ChatScreen}
options={{headerTitle: (props) => <ChatHeader {...props} />}} // PROBLEM IS HERE...
/>
<Stack.Screen
name="Contacts"
component={ContactScreen}
options={{title: 'Select Contact'}}
/>
</Stack.Navigator>
Now, In someother component, I pass some data to Chat
screen:现在,在其他组件中,我将一些数据传递给Chat
屏幕:
const ContactItem = ({item}) => {
const navigator = useNavigation();
const {phone, name, profile} = item;
const [userB, setUserB] = useState(null);
return (
<TouchableOpacity
onPress={() => {
const formattedPhone = reformat(phone);
getUserDetails(formattedPhone, setUserB);
if (userB) {
console.log(userB);
navigator.navigate('Chat', {
user: userB,
});
} else {
ToastMessage(`User with phone number ${formattedPhone} does not exist`);
}
}}>
</TouchableOpacity>
);
};
Now, while navigating to Chat
I'm passing userB
data to Chat
Screen I'm getting the following details in ChatHeader
component:现在,在导航到Chat
时,我将userB
数据传递到Chat
Screen,我在ChatHeader
组件中获得了以下详细信息:
const ChatHeader = () => {
const navigator = useNavigation();
const {params} = useRoute();
const {user} = params;
console.log(user);
return (
<View style={styles.container}>
<TouchableOpacity>
<Image
source={require('../../../assets/images/user-icon.png')}
style={styles.image}
/>
</TouchableOpacity>
<View style={styles.headerTextContainer}>
<Text style={styles.headerText}>{user.name}</Text>
</View>
</View>
);
};
Error:错误:
Warning: Cannot update a component (`NativeStackNavigator`) while rendering a different component (`ChatScreen`). To locate the bad setState() call inside `ChatScreen`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render in ChatScreen (at SceneView.tsx:126).
Error: Couldn't find a route object. Is your component inside a screen in a navigator? This error is located at:in ChatHeader (at navigation/index.js:47)
As I'm passing the props
in Stack.Screen options={{headerTitle: (props) => <ChatHeader {...props} />}}
so this ensures that I should be able to inherit the data in ChatHeader
which is passed to Chat
screen component right?当我在Stack.Screen options={{headerTitle: (props) => <ChatHeader {...props} />}}
中传递props
时,这样可以确保我应该能够继承ChatHeader
中的数据,即传递给Chat
屏幕组件对吗? But that is not the case...但事实并非如此...
Can someone help me?有人能帮我吗?
Thank you!谢谢!
React Navigation doc's says : React Navigation 文档说:
In order to use params in the title, we need to make options prop for the screen a function that returns a configuration object.为了在标题中使用参数,我们需要为屏幕创建一个 function 选项,它返回一个配置 object。
So you have to change所以你必须改变
options={{headerTitle: (props) => <ChatHeader {...props} />}} options={{headerTitle: (props) => <ChatHeader {...props} />}}
to至
options={(props) => ({headerTitle: <ChatHeader {...props} />})} options={(props) => ({headerTitle: <ChatHeader {...props} />})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.