React Navigation(正式文書参照を学習中)

反応ナビゲーションのインストールと使用方法について説明します.公式文書や書籍を参考にしました.
以下の番号順は、本書getstart順に記入します.これからもっと熟知して、一つ一つ整理し直すつもりです.
まず、すべての基礎コンテンツとガイドのTab navigationが主な目標です.
そして読書を続ける
正式な書類
https://reactnavigation.org/docs/getting-started
getting started

プロジェクト

の作成

npx react-native init LearnReactNative

反作用ナビゲーション取付

yarn add @react-navigation/native

応答ナビゲーションに依存するライブラリのインストール
(公式ファイルによると、ライブラリをインストールするときに警告が出る可能性があります.私のアプリケーションが構築されている限り、無視できます.)

yarn add react-native-screens react-native-safe-area-context

ReactNative 0.6からliningが自動的にインストールされます.したがってreact-ネイティブリンクをインストールする必要はありません.しかし,Macユーザはios環境にpodsをインストールして開発する必要がある.

npx pod-install ios

또는

cd ios
pod install

アンドロイドデバイスで正常に動作するために、依存ライブラリとしてインストールされているreact-ネイティブ-screensにはもう1つ設定する必要があります.MainActivity.java. ファイルを見つけて、MainActivity class bodyセクションにコードを追加する必要があります.
このセクションを設定した理由は、本書で次のとおりです.
This change is required to avoid crashes related to View state being not persisted consistently across Activity restarts.

경로
android/app/src/main/java/<your package name>/MainActivity.java.

추가할 코드

import android.os.Bundle;  // 최상단에 

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

NavigationContainerを適用して

ナビゲーションを行います.jsまたはindex.jsで設定すべきです.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

Webブラウザのようにhistoryを使用するためにstack navigatorライブラリをインストールします.

yarn add @react-navigation/native-stack

createNativeStackNavigatorの使用
createNativeStackNavigator関数を使用して、ScreenとNavigatorをキーとするオブジェクトを返します.この2つはナビゲーションを構成しています.NavigatorでScreenを囲みます.
スタックナビゲータの正式なドキュメント
https://reactnavigation.org/docs/native-stack-navigator/

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Stack.Screenは、propsとしてname、component、optionsを使用します.完全なオプションを指定する場合は、NavigatorでscreenOptionsを使用します.options={title:[overView]}この設定で画面タイトルの名前を変更できます.上の2つの道具はどこで使うのは更に少し学ぶ必要があります

stack.screenで使用されるコンポーネントはnavigationpropsを受信することができる.
数式ドキュメントのナビゲート
https://reactnavigation.org/docs/navigation-prop/

navigation.naving(「detail」)に入った状態で再びdetailに入ると、何も起こらない.しかしナビゲーション.pushを使用すると、追加の画面が表示されます.

StackNavigatorが生成したタイトルはgoです.背舵がある.スタックが消えると自動的に消えます.

navideの2番目のパラメータにデータを渡すことができます.構成部品からルーティングします.params受信として、受信したデータはJSONでなければなりません.stringgifyがおすすめです.以下の理由を参考にしてください.

state persistence - https://reactnavigation.org/docs/state-persistence
deep linking -
https://reactnavigation.org/docs/deep-linking

We recommend that the params you pass are 
JSON-serializable. 
That way, you'll be able to use state persistence 
and your screen components will have the right contract 
for implementing deep linking.

navigation.setParamsでParamsを変更できます.
setParamsでscreen option titleを交換できませんsetOptionsを使用して置き換えます.
詳細については、「文書」を参照してください.
https://reactnavigation.org/docs/navigation-prop#setparams

Stack.Screenで初期paramsを設定できます.
ちょっとReaction DefaultPropsみたいな感じ

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>

naving、gobackを使用してデータを後方に転送することもできます.正式ドキュメント転送parameters to routionsでさようなら.

function HomeScreen({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate('CreatePost')}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState('');

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: 'white' }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass and merge params back to home screen
          
          // 뒤로 전달할때는 네비게이터에 이렇게 전달하는게 핵심인듯 하다.
          
          navigation.navigate({
            name: 'Home',
            params: { post: postText },
            merge: true,
          });
        }}
      />
    </>
  );
}

ネストされたナビゲータにデータを転送
https://reactnavigation.org/docs/nesting-navigators

paramsをデータ転送に使用しないでください.次の使用例を参照して、正式なドキュメントを表示します.

この子もここで探してみましょう.
https://reactnavigation.org/docs/params

// Don't do this 이렇게 사용 노노 
navigation.navigate('Profile', {
  user: {
    id: 'jane',
    firstName: 'Jane',
    lastName: 'Done',
    age: 25,
  },
});

// Some examples of what should be in params are: 사용예시

1.Ds like user id, item id etc., e.g. 
navigation.navigate('Profile', { userId: 'Jane' })

2. Params for sorting, filtering data etc. 
when you have a list of items, e.g.
navigation.navigate('Feeds', { sortBy: 'latest' })

3. Timestamps, page numbers or cursors for pagination, e.g. 
navigation.navigate('Chat', { beforeTime: 1603897152675 })

4. Data to fill inputs on a screen to compose something, e.g.
navigation.navigate('ComposeTweet', { title: 'Hello world!' })

thtitleでparamsを使う(彼は理解していない)
https://reactnavigation.org/docs/headers

navigation.setOptionsに設定したオプションのタイトルを変更できます.

スタイルをoptionsやheaderStyleなどに変更できます

Stack.NavigatorのscreenOptionsプロパティを使用して、タイトルスタイル全体を変更できます.イメージとかを入れたいなら?次のコード

を参照してください.

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: (props) => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

ヘッダーにボタンの作成、後退ボタンのカスタマイズ、上書き
https://reactnavigation.org/docs/header-buttons

ネイバーからbecontinueをもう一度見ます