アプリを実行した後、このエラーが発生します:
エラー:バンドルに失敗しました:エラー:react-native-safe-area-contextからモジュールを解決できませんnode_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js:react-native-safe-area-contextがプロジェクト内に見つかりませんでした。
しかし、私が以前のデモで行ったのと同じことです。それは完全にうまくいきました。
私はここで何が間違っているのかわかりません。私のコードを確認してください:
インストール用:
- React Native Navigation&Gesture Handler:
npm install --save react-navigation
npm install --save react-native-gesture-handler
- React Native Stack:
npm install --save react-navigation-stack
App.js
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import FirstOptionsPage from "./FirstOptionsPage";
const MainNavigator = createStackNavigator(
  {
    FirstOptions: FirstOptionsPage
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        // backgroundColor: '#28F1A6',
        elevation: 0,
        shadowOpacity: 0
      },
      headerTintColor: "#ca375e",
      headerTitleStyle: {
        fontWeight: "bold",
        color: "#161616"
      }
    }
  }
);
const App = createAppContainer(MainNavigator); // For setting Navigation Stack
export default App;
そしてFirstOptionsPage.js:
import React from "react";
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  ScrollView,
  Switch
} from "react-native";
export default class FirstOptionsPage extends React.Component {
  static navigationOptions = {
    title: "Preferences"
  };
  constructor(props) {
    super(props);
    this.state = {
      switch1Value: false
    };
  }
  toggleSwitch1 = value => {
    this.setState({ switch1Value: value });
    console.log("Switch 1 is: " + value);
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <SafeAreaView style={styles.mainContainerStyle}>
        <View style={styles.subContainerStyle}>
          <Text style={styles.subtitleTextStyle}>Someone likes my post</Text>
          <View style={styles.switchStyle}>
            <Switch
              onValueChange={this.toggleSwitch1}
              value={this.state.switch1Value}
              thumbColor={MAGENTA_COLOR_CODE}
              trackColor={{
                false: GREY_COLOR_CODE,
                true: DARK_GREY_COLOR_CODE
              }}
            />
          </View>
        </View>
      </SafeAreaView>
    );
  }
}
React-Nativeは初めてです。これを修正するのを手伝ってください。
react-native-safe-area-contextノードモジュールを確認します。ノードモジュールにreact-navigation-stackは必要ですが、ノードモジュールにはありません