RN Navigationの世界に浸る
4656 ワード
1.反応ナビゲーション
npm install --save @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack
2]
App.js
react-navigationナビゲーションコンテンツをインポート...
Navigations/stackディレクトリで作成したものを持ってきてください.
react-navigator/stackからcreateStackNavigatorをインポートします.
スタックを宣言し、スタックナビゲーションを作成するために割り当てます.
returnでStackNavigatorでStack.Screenに加わる
Screenは変数としてnameとcomponentを使用...
🐱👤 画面を除いて、上位要素ナビゲータプロパティに配置すると、画面が領域全体を占めます.screenOptions={{ cardStyle : {backgroundColor: "pink"}}}
🐥 タイトル名を変更するには、画面ごとに属性オプション={headerTitle:[メニュー1]セット"}}を設定する必要があります.
🐥 これは、ナビゲーションにプロパティを設定するscreenOptions={HeaderTitle:[メニュー1]セット"}}です.
👨🏾🤝👨🏻 cardStyle,修飾見出し->見出しStyle,見出しTitleStyle,見出しTitleAlign
Screenのコンポーネントはnavigationflopsプレゼントを獲得します.
navigationの箱にはいろいろなプレゼントがありますが、その中の1つは
必要な場所にスペースを移動できるナビゲーション関数...
(最初のパラメータは、移動する構成部品の名前です.
2番目のパラメータは、オブジェクトを渡すことができます.
取り出して使うとき、その素子からパスをフロップとしてもらいます.params.キー値表示)
npm install --save @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack
2]
App.js
react-navigationナビゲーションコンテンツをインポート...
Navigations/stackディレクトリで作成したものを持ってきてください.
return (
<NavigationContainer>
<StackNavigation />
</NavigationContainer>
Stack.jsreact-navigator/stackからcreateStackNavigatorをインポートします.
スタックを宣言し、スタックナビゲーションを作成するために割り当てます.
returnでStackNavigatorでStack.Screenに加わる
Screenは変数としてnameとcomponentを使用...
🐱👤 画面を除いて、上位要素ナビゲータプロパティに配置すると、画面が領域全体を占めます.screenOptions={{ cardStyle : {backgroundColor: "pink"}}}
🐥 タイトル名を変更するには、画面ごとに属性オプション={headerTitle:[メニュー1]セット"}}を設定する必要があります.
🐥 これは、ナビゲーションにプロパティを設定するscreenOptions={HeaderTitle:[メニュー1]セット"}}です.
👨🏾🤝👨🏻 cardStyle,修飾見出し->見出しStyle,見出しTitleStyle,見出しTitleAlign
const Stack =createStackNavigator()
const StackNavigation = () => {
return (
<Stack.Navigator>
<Stack.Screen name="List" component={List} />
<Stack.Screen name="Item" component={Item} />
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
Home.jsScreenのコンポーネントはnavigationflopsプレゼントを獲得します.
navigationの箱にはいろいろなプレゼントがありますが、その中の1つは
必要な場所にスペースを移動できるナビゲーション関数...
(最初のパラメータは、移動する構成部品の名前です.
2番目のパラメータは、オブジェクトを渡すことができます.
取り出して使うとき、その素子からパスをフロップとしてもらいます.params.キー値表示)
const Home = ({navigation}) => {
return (
<View>
<Text>Home입니다. 환영합니다.오왕 😈😈🤓</Text>
<Button title="눌러졍 😍" onPress={()=>navigation.navigate('List')} />
</View>
今日はここまでーーーー!Reference
この問題について(RN Navigationの世界に浸る), 我々は、より多くの情報をここで見つけました https://velog.io/@hook/RN-Navigation의-세계에-흠뻑-빠지다テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol