React Navigation（V2 / V3）：画面上のnavigationOptionsでnavigation.state.indexにアクセスする方法
J.ヘスターズ
私はReactNativeアプリを構築しており、ナビゲーションにはReact Navigation（V3）を使用しています。UI要素には、React NativeElementsを使用します。
複数のナビゲーターで再利用する画面があります。スタックのルートにある場合もあれば、スタックでプッシュされる場合もあります。画面がスタックのルートにある場合は、デフォルトの[戻る]ボタンを表示するか、ハンバーガーメニューアイコンを表示するため、スタック内の位置に基づいてプログラムでheaderLeftこの画面に要素を追加navigationOptionsします（スタックはドロワーにネストされています）。
だから私は以下を試しました：
export class ScannerScreen extends Component {
static navigationOptions = ({ navigation }) => ({
headerLeft:
navigation.state.index > 0 ? (
undefined
) : (
<Icon type="ionicon" name="ios-menu" onPress={navigation.toggleDrawer} />
),
title: strings.scannerTitle
});
// ...
問題は、これnavigation.state.indexがundefinedここのように機能しないことです。Reactナビゲーションでこれをどのように行うでしょうか？
編集：要求ごととして、私はスクリーンショットの追加console.log(navigation)（を経由して<Icon />複数可onPress。）
J.ヘスターズ
私はhacky解決策を見つけました、それは大丈夫ですが、私もそれを少し嫌います：
const stackConfig: StackNavigatorConfig = {
cardStyle: styles.card,
navigationOptions: {
headerBackTitleStyle: styles.headerBackTitle,
headerStyle: styles.header,
headerTintColor: "black"
}
};
const HomeStack = createStackNavigator(
{ HomeScreen, RestaurantDetailScreen, MenuScreen, ScannerScreen },
{
...stackConfig,
initialRouteName: "HomeScreen",
navigationOptions: ({ navigation }) => ({
headerLeft:
parseFloat(navigation.state.key.slice(-1)) > 1 ? (
undefined
) : (
<Icon
containerStyle={styles.leftIcon}
type="ionicon"
name={getIconName("menu")}
onPress={navigation.toggleDrawer}
/>
),
...stackConfig.navigationOptions
})
}
);
このようにして、スタック全体に対して自動的に設定します。これは、それぞれの画面の個々のナビゲーションオプションでも実行できます。ただし、画面に自動的に割り当てられたキーにはインデックスが含まれているため、これは機能します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
React Native Navigation v2（wix）TopBarを無効にする
- 2
React Navigation（v2）小道具をTabNavigatorに渡し、それらの小道具を画面に送信する方法
- 3
React Navigation V2：navigation.pushとnavigation.navigateの違い
- 4
React Navigation V2：navigation.pushとnavigation.navigateの違い
- 5
SearchBar react-native-navigation V2 Android
- 6
Wix React Native Navigation V2、Androidで向きのポートレートをロックする方法
- 7
react-native-navigation v2のすべての画面に固定ヘッダーを追加するにはどうすればよいですか？
- 8
Navigation.push（wixからのreact Native Navigationのv2）を使用すると、宛先コンポーネントで小道具が取得されません。小道具にアクセスするにはどうすればよいですか？
- 9
react-native-navigation v2のsideMenuにアイコンを追加するにはどうすればよいですか？
- 10
React Navigation V2のドロワーにログアウトボタンを作成する簡単な方法はありますか？
- 11
React NavigationのnavigationOptionsで非静的メソッドにアクセスすることは可能ですか？
- 12
Is there a way to read the options before use the mergeOptions function in react native navigation v2?
- 13
Turn off Push Animation When Use React Native Navigation V2
- 14
React-Native-Navigation（v2）下部タブonPress
- 15
Wix React-Native-Navigation v2 and redux-persist
- 16
React-Nativeでthis.stateにアクセスする
- 17
React Native Navigation v2でmergeOptions関数を使用する前にオプションを読み取る方法はありますか？
- 18
React Navigation（V2）：ドロワーナビゲーター内でスタックナビゲーターのアイコンとラベルを設定するにはどうすればよいですか？
- 19
React Native Navigation v2sideMenuが画面に移動できません
- 20
AWS Amplify Auth / react-navigation：認証状態にアクセスする方法は？
- 21
tabnavigatorでredux状態にアクセスする（react-navigation）
- 22
React（v15）のrender（）でDOMにアクセスする
- 23
Updating State of Another Screen in React Navigation
- 24
Passing state through navigation React Native/Expo
- 25
react-navigationをv3に更新した後、undefinedはオブジェクトではありません
- 26
react-navigationで別のスタックにリセットする方法
- 27
createContainer (react-meteor-data) で Redux State にアクセスするにはどうすればよいですか?
- 28
StackNavigatorをカスタムBottomTabNavigatorにネストし、React Navigation V> 2
- 29
React Native Navigation v2でカスタムトップバータイトルコンポーネントを更新するにはどうすればよいですか？
コメントを追加