首先

继续使用React-Native制作iOS应用程序(第1部分，环境设置)。

想要写一点关于页面转换的内容。
据说在React中使用了一个名为navigator的东西来进行页面转换。
React-Native也不例外，也是使用navigator进行页面转换。
据说页面转换的navigator有stack/tab/draw等等。
React Navigation（官方）

创建环境

如果按照下面的感觉来做，应该基本上应该是可以的。
在Drawer中修改babel.config.js，或者安装其他包，但我忘了，就不提了。
（如果在stackoverflow上搜索错误内容应该可以解决问题）

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

# stack navigation関連
npm install @react-navigation/native-stack

# Tab navigation関連
npm install @react-navigation/bottom-tabs

# Drawer navigation関連
npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

在iOS安装完成后，更新iOS库，请在ios目录中执行。 (对于Android，似乎需要修改Java文件而不是使用pod update）

# iosディレクトリ
pod update

# update後、反映されない場合
# キャッシュをクリアして実行すると解決されたりする
npm start -- --reset-cache

尝试使用堆栈导航器。

因为创建文件很麻烦，所以只在index.js中进行实现。

/**
 * @format
 */
import React, { Component, useState, useRef } from 'react';
import { AppRegistry, Text, View, Button, } from 'react-native';
import { name as appName } from './app.json';

// ?これらをインポートしないとnavigatorが使えない
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function MakePageFunc(num) {
    return function ({ navigation }) {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Page No.{num}</Text>
                <Button title={`Go to Page No. ${((num + 1) % 3)}`}
                    onPress={() => navigation.navigate("Page" + ((num + 1) % 3))}
                />
            </View>
        );
    };
}

const Stack = createNativeStackNavigator();

function StackScreen() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Page0" component={MakePageFunc(0)} />
            <Stack.Screen name="Page1" component={MakePageFunc(1)} />
            <Stack.Screen name="Page2" component={MakePageFunc(2)} />
        </Stack.Navigator>
    );
}

class temp extends Component {
    render() {
        return (
            <NavigationContainer>
                <StackScreen />
            </NavigationContainer>
        );
    }
}

AppRegistry.registerComponent(appName, () => temp);

尝试使用Tab Navigator

使用方法与stack相同。

/**
 * @format
 */

import React, { Component, useState, useRef } from 'react';
import { AppRegistry, Text, View, Button, } from 'react-native';
import 'react-native-gesture-handler';
import { name as appName } from './app.json';

// ?これらをインポートしないとnavigatorが使えない
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function MakePageFunc(num) {
    return function ({ navigation }) {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Page No.{num}</Text>
                <Button title={`Go to Page No. ${((num + 1) % 3)}`}
                    onPress={() => navigation.navigate("Page" + ((num + 1) % 3))}
                />
            </View>
        );
    };
}

const Tab = createBottomTabNavigator();

function TabScreen() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Page0" component={MakePageFunc(0)} />
            <Tab.Screen name="Page1" component={MakePageFunc(1)} />
            <Tab.Screen name="Page2" component={MakePageFunc(2)} />
        </Tab.Navigator>
    );
}

class temp extends Component {
    render() {
        return (
            <NavigationContainer>
                <TabScreen />
            </NavigationContainer>
        );
    }
}

AppRegistry.registerComponent(appName, () => temp);

使用Draw Navigator。

在执行之前更新babel.config.js。
Drawer Native与Stack/Tab没有区别。

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    'react-native-reanimated/plugin'
+  ]
};

import React, { Component, useState, useRef } from 'react';
import { AppRegistry, Text, View, Button, } from 'react-native';
import 'react-native-gesture-handler';
import { name as appName } from './app.json';

// ?これらをインポートしないとnavigatorが使えない
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

function MakePageFunc(num) {
    return function ({ navigation }) {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Page No.{num}</Text>
                <Button title={`Go to Page No. ${((num + 1) % 3)}`}
                    onPress={() => navigation.navigate("Page" + ((num + 1) % 3))}
                />
            </View>
        );
    };
}

const Draw = createDrawerNavigator();

function DrawScreen() {
    return (
        <Draw.Navigator>
            <Draw.Screen name="Page0" component={MakePageFunc(0)} />
            <Draw.Screen name="Page1" component={MakePageFunc(1)} />
            <Draw.Screen name="Page2" component={MakePageFunc(2)} />
        </Draw.Navigator>
    );
}

class temp extends Component {
    render() {
        return (
            <NavigationContainer>
                <DrawScreen />
            </NavigationContainer>
        );
    }
}

AppRegistry.registerComponent(appName, () => temp);

总结

可以按照以上/上述的感觉来实现屏幕切换。
另外，据说也可以结合抽屉和堆栈来使用。

接下来，我将写关于如何使用C++创建模块的方法。
尝试使用React-Native创建iOS应用程序（第三节使用C++创建模块）。