以下のネストされた反応ナビゲーション形式で Redux を使用しようとしています。しかし、redux から「dispatch」を使用するときはいつでも [ const dispatch = useDispatch(); ] ネストされた反応ナビゲーション画面には、値を redux に保存する前の白い画面のショートカットが表示されます。
ディスパッチを呼び出すたびに、バックグラウンドで実行されている機能がキャンセルされることもあります。
ただし、タブ ナビゲータに単一の画面が割り当てられている場合、これは発生しないため、書式設定の問題である可能性があると思います。
React ナビゲーション画面:
import HomeScreen from './screens/homeScreen';
import NotificationsScreen from './screens/notificationsScreen';
import ExploreScreen from './screens/exploreScreen';
import ProfileScreen from './screens/profileScreen';
import SinglePostScreen from './screens/singlePostScreen';
import LogRegScreen from './screens/logRegScreen';
export default function CoreScreen() {
const Tab = createMaterialBottomTabNavigator();
const HomeStack = createNativeStackNavigator();
const ExploreStack = createNativeStackNavigator();
const ProfieStack = createNativeStackNavigator();
const HomeTab = () => {
return(
<HomeStack.Navigator>
<HomeStack.Screen name="Home" component={HomeScreen} />
<HomeStack.Screen name="Profile" component={ProfileScreen} />
<HomeStack.Screen name="SinglePost" component={SinglePostScreen} />
<HomeStack.Screen name="Account" component={AccountDetails} />
</HomeStack.Navigator>
);
}
const ExploreTab = () => {
return(
<ExploreStack.Navigator>
<ExploreStack.Screen name="Explore" component={ExploreScreen}/>
<ExploreStack.Screen name="Profile" component={ProfileScreen}/>
<ExploreStack.Screen name="SinglePost" component={SinglePostScreen}/>
</ExploreStack.Navigator>
);
}
const ProfileTab = () => {
return(
<ProfieStack.Navigator>
<ProfieStack.Screen name="Profile" component={ProfileScreen}/>
<ProfieStack.Screen name="SinglePost" component={SinglePostScreen} />
<ProfieStack.Screen name="LogReg" component={LogRegScreen} />
</ProfieStack.Navigator>
);
}
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="HomeTab"
activeColor="lightblue"
inactiveColor="white"
>
<Tab.Screen name="HomeTab"
component={HomeScreen14}
/>
<Tab.Screen name="ExploreTab"
component={ExploreTab}
/>
<Tab.Screen name="PostTab"
component={NotificationsScreen}
/>
<Tab.Screen name="ProfileTab"
component={ProfileTab}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
App.js (redux がある場所) :
import { StatusBar } from 'expo-status-bar';
import React from 'react';
// REDUX
import { Provider } from 'react-redux';
import {store} from './src/store/store';
import CoreScreen from './src/CoreScreen';
export default function App() {
return(
<Provider store={store}>
<CoreScreen />
</Provider>
)
}