Javascript 尝试将StackScreen推入React Native
每当我通过点击消息来激活onPress方法时,MessageScreen组件只是重新呈现而不是显示聊天屏幕。即使我用任何其他屏幕替换ChatScreen,也会发生这种情况。在这件事上的任何帮助都是非常感谢的 App.jsJavascript 尝试将StackScreen推入React Native,javascript,ios,reactjs,react-native,react-navigation,Javascript,Ios,Reactjs,React Native,React Navigation,每当我通过点击消息来激活onPress方法时,MessageScreen组件只是重新呈现而不是显示聊天屏幕。即使我用任何其他屏幕替换ChatScreen,也会发生这种情况。在这件事上的任何帮助都是非常感谢的 App.js <NavigationContainer ref={containerRef} initialState={initialNavigationState}> <Drawer.Navigator> <Drawer.
<NavigationContainer ref={containerRef} initialState={initialNavigationState}>
<Drawer.Navigator>
<Drawer.Screen name="Feed" component={BottomTabNavigator} options={{swipeEnabled: false}} />
<Drawer.Screen name="Settings" component={SettingsStack} options={{swipeEnabled: false}} />
</Drawer.Navigator>
</NavigationContainer>
底部选项卡导航器
const BottomTab = createBottomTabNavigator();
export default function BottomTabNavigator({ navigation, route }) {
{...HomeStack Code}
{...ProfileStack Code}
const MyMessagesStack = createStackNavigator();
function MessagesStack() {
return (
<MyMessagesStack.Navigator initialRouteName={"Messages"}
screenOptions={{headerShown: false}}>
<MyMessagesStack.Screen name="Messages" component={MessagesScreen} />
<MyMessagesStack.Screen name="Chats" component={ChatScreen} />
</MyMessagesStack.Navigator>
);
}
return (
<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME} >
<BottomTab.Screen
name="Home"
component={HomeStack}
options={{title: 'Feed'}}
/>
<BottomTab.Screen
name="Messages"
component={MessagesStack}
options={{title: 'Messages'}}
/>
<BottomTab.Screen
name="Profile"
component={ProfileStack}
options={{title: 'Profile'}}
/>
</BottomTab.Navigator>
);
}
MessageScreen.js
//flatscreen to render message components
</View>
<FlatList
data={Data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => props.navigation.navigate('Chats')} >
<Message
image={item.image}
name={item.name}
lastMessage={item.message}
timeStamp={item.timestamp}
opened
/>
</TouchableOpacity>
)}
/>
组件重新安装的原因是,在其他组件中定义了一些组件: 函数导航器{ //这里 函数消息策略{ // ... } // ... } 您需要在外部定义它们,以避免: 函数消息策略{ // ... } 函数导航器{ // ... }
您的组件是功能性的还是基于类的?@AliHayder它是功能性的,不能在组件内部创建组件。将所有组件移到外部。@satya164我只在组件内部创建堆栈,因为在RN 5 docsI中就是这样做的。我看不出它在另一个组件内部创建组件的位置。它用于嵌套导航器,而不是创建组件——当您在另一个函数中编写函数时