收到此错误：错误：捆绑失败：错误：无法解析模块`react-native-safe-area-context`

Question

运行我的应用程序后出现此错误：

错误：捆绑失败：错误：无法从react-native-safe-area-context解析模块node_modules/react-navigation-stack/lib/module/vendor/views/Stack/StackView.js：在项目内找不到react-native-safe-area-context。

但是我为以前的演示做了同样的事情。它工作得很好。

我不知道我在做什么错。请检查我的代码：

用于安装：

1. 反应本机导航和手势处理程序：

npm install --save react-navigation

npm install --save react-native-gesture-handler

2. 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的新手。请帮助我解决此问题。

Answer 1

我认为问题出在SafeAreaView，对于新的本机版本，它已迁移到react-native-community/react-native-safe-area-view。如果要使用SafeAreaView，则应先安装。

新用法如下：

import SafeAreaView from 'react-native-safe-area-view';

export default function MyAwesomeApp() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Text>
          Look, I'm safe! Not under a status bar or notch or home indicator or
          anything! Very cool
        </Text>
      </View>
    </SafeAreaView>
  );
}

要安装它，您可以使用以下命令：yarn add react-native-safe-area-view react-native-safe-area-context。

如果不使用自动链接，则还必须链接它。有关详细信息，请参见此link