javascript - Trying to push StackScreen in React Native
问题描述
Whenever I activate the onPress method by tapping on a message, the MessageScreen component just re-renders rather than displaying ChatScreen. This happens even if I replace ChatScreen with any other screen. Any help on the matter is much appreciated.
App.js
<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>
BottomTabNavigator
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>
)}
/>
解决方案
您的组件重新安装的原因是因为在其他组件中定义了组件:
function BottomTabNavigator() {
// Here
function MessagesStack() {
// ...
}
// ...
}
您需要在外部定义它们以避免这种情况:
function MessagesStack() {
// ...
}
function BottomTabNavigator() {
// ...
}
推荐阅读
- angular - Angular 2 中的属性绑定
- javascript - Phonegap Ajax 请求使用了错误的 URL
- javascript - 如何在 html 和 javascript 上使用 onclick 多次更改图像源
- gradle - 无法找到或加载主类 cucumber.cli.Main -2
- python - 使用 matplotlib 来自 data.txt 的等高线图
- java - 合并2个排序的链表错误答案
- javascript - npm 版本错误:无法识别 find_dp0'
- c# - 覆盖 XAML 中自定义控件样式的属性
- c++ - 如何让 LED 代码从键盘按下运行
- android - 背景模糊过滤器在 chrome 中有效,但在 webview 中无效