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ディレクトリで作成したものを持ってきてください.
return (
    <NavigationContainer>
      <StackNavigation />
    </NavigationContainer>
Stack.js
react-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.js
Screenのコンポーネントはnavigationflopsプレゼントを獲得します.
navigationの箱にはいろいろなプレゼントがありますが、その中の1つは
必要な場所にスペースを移動できるナビゲーション関数...
(最初のパラメータは、移動する構成部品の名前です.
2番目のパラメータは、オブジェクトを渡すことができます.
取り出して使うとき、その素子からパスをフロップとしてもらいます.params.キー値表示)
const Home = ({navigation}) => {
    return (        
            <View>
                <Text>Home입니다. 환영합니다.오왕 😈😈🤓</Text>
                <Button title="눌러졍 😍" onPress={()=>navigation.navigate('List')} /> 
            </View>
今日はここまでーーーー!