react-navigation6.xルーティングライブラリの基本的な使い方の詳しい説明

npx 反応ネイティブ 初期化テストRN

糸アンドロイド

糸の始まり

糸を追加 @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

  android.os.Bundle をインポートします。

  @オーバーライド
  保護されたvoid onCreate(バンドルsavedInstanceState) {
    super.onCreate(null);
  }

'react' から * を React としてインポートします。
'react-native' から { View, Text } をインポートします。
'@react-navigation/native' から {NavigationContainer} をインポートします。
'@react-navigation/native-stack' から createNativeStackNavigator をインポートします。

関数ホームスクリーン() {
  戻る （
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>ホーム画面</Text>
    </表示>
  );
}

スタックを初期化します。

関数App() {
  戻る （
    // NavigationContainer はルートのコンテナであり、関連するすべてのコンテンツをそこに置く <NavigationContainer>
      <スタック.ナビゲーター>
        * Stack.Screen はルーティングされたウィンドウであり、name はジャンプ先のウィンドウ名を設定し、ウィンドウのコンポーネント コンテンツはコンポーネント * に配置されます。
        <Stack.Screen name="Home" コンポーネント={HomeScreen} />
      </Stack.Navigator>
    </ナビゲーションコンテナ>
  );
}

デフォルトのアプリをエクスポートします。

'react' から * を React としてインポートします。

// ボタンを追加
'react-native' から { Button、View、Text } をインポートします。
'@react-navigation/native' から {NavigationContainer} をインポートします。
'@react-navigation/native-stack' から createNativeStackNavigator をインポートします。
                    
                // ナビゲーションパラメータを追加する function HomeScreen({navigation}) {
  戻る （
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>ホーム画面</Text>
      ジャンプボタンを追加 */
      <ボタン
        title="詳細へ移動"   
        // navigation.navigate('Details') はジャンプに使用され、Details は対応するウィンドウ名を指します
        onPress={() => navigation.navigate('詳細')}
      />
    </表示>
  );
}

関数の詳細画面() {
  戻る （
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>詳細画面</Text>
    </表示>
  );
}

スタックを初期化します。

関数App() {
  戻る （
    // NavigationContainer はルートのコンテナであり、関連するすべてのコンテンツをそこに置く <NavigationContainer>
      <スタック.ナビゲーター>
        * Stack.Screen はルーティングされたウィンドウであり、name はジャンプ先のウィンドウ名を設定し、ウィンドウのコンポーネント コンテンツはコンポーネント * に配置されます。
        <Stack.Screen name="Home" コンポーネント={HomeScreen} />
        <Stack.Screen name="詳細" コンポーネント={DetailsS​​creen} />
      </Stack.Navigator>
    </ナビゲーションコンテナ>
  );
}

デフォルトのアプリをエクスポートします。

<Stack.Screen name="Home" コンポーネント={HomeScreen} オプション={{ title: 'my home'}} />

<Stack.Screen name="詳細" コンポーネント={DetailsS​​creen}
   オプション = {({ ルート }) => ({ タイトル: route.params.title })}
/>

<ボタン
   title="詳細へ移動"
  // navigation.navigate('Details') はジャンプに使用され、Details は対応するウィンドウ名を指します
   onPress={() => navigation.navigate('詳細', { title: 'セカンダリページ' })}
/>

<ボタン
   title="タイトルを更新"
   onPress={() => navigation.setOptions({ title: '更新されました!' })}
/>

関数LogoTitle() {
  戻る （
    <画像
      スタイル={{ 幅: 50, 高さ: 50 }}
      ソース={require('./src/img/details.png')}
    />
  );
}

<Stack.Screen name="Home" コンポーネント={HomeScreen}
   オプション={{
     タイトル:「私の家」
     ヘッダータイトル: (props) => <LogoTitle {...props} />
   }}
/>

        <Stack.Screen name="Home" コンポーネント={HomeScreen}
          オプション={{
            タイトル:「私の家」
            ヘッダータイトル: (props) => <LogoTitle {...props} />,
            ヘッダー右: () => (
              <ボタン
                onPress={() => alert('これはボタンです!')}
                title="情報"
                カラー="#fff"
              />
            ）、
          }}
        />

        <Stack.Screen name="詳細" コンポーネント={DetailsS​​creen}
          オプション={({ ルート }) => (
            {
              タイトル: route.params.title,
              ヘッダーバックイメージソース: detailsImg、
            }
          )}
        />