私はいくつかの値を保存するためにreduxを使用しています。これらの値の1つは、「seen」という名前のブール値です。（WebSocketを介して）新しいメッセージが到着するたびに「false」に更新され、メッセージ画面が開かれると、再び「true」に更新されます。
タブナビゲーターもあります。このタブナビゲーターには、ホーム、ユーザー、メッセージ、設定の4つのボタン（アイコン）があります。
「seen」の値が「false」の場合は常に、タブナビゲーターに追加のアイコンを表示して、ユーザーに新しいメッセージがあることを示したいと思います。だから私はtabnavigatorのreduxストアにアクセスしたいと思っています。
私のタブナビゲーターコードは次のとおりです。
const TabsNavigator = createMaterialTopTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarIcon: () => (
<Icon library="far" icon="home" color="black" size={25} />
)
}
},
Users: {
screen: Users,
navigationOptions: {
tabBarIcon: () => (
<Icon library="far" icon="users" color="black" size={25} />
)
}
},
Messages: {
screen: Messages,
navigationOptions: {
tabBarIcon: () => {
return (
<View>
// HERE I WANT TO HAVE ACCESS TO THE REDUX STORE (SEEN)
// I WANT TO SHOW AN ICON WHEN SEEN = FALSE
{seen === false &&
<Icon library="far" icon="exclamation" color="black" size={25} />
}
<Icon library="far" icon="comment" color="black" size={25} />
</View>
)}
}
},
Settings: {
screen: Settings,
navigationOptions: {
tabBarIcon: () => (
<Icon library="far" icon="cog" color="black" size={25} />
)
}
}
},
{
initialRouteName: 'Home',
tabBarPosition: 'bottom',
tabBarOptions: {
showIcon: true
}
}
)
タブナビゲーターで（reduxストアにある）「seen」の値にアクセスするにはどうすればよいですか？useSelector(state => state.messages.seen)タブナビゲーターへの追加が機能せず、「フックは機能コンポーネントの本体からのみ呼び出すことができます」というエラーが表示されます。
これはあまりお勧めできませんが、構成したファイルからストアをエクスポートすると、Reduxの状態に直接アクセスできます。
例えば
const store = createStore(
persistedAppReducer, // disregard the actual config
undefined,
applyMiddleware(NavMiddleware, LoggerMiddleware, EpicMiddleware)
);
export default store;
次に、これをインポートしてstore、次のように状態を取得できます。store.getState()
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加