javascript - 如何在同一目录中正确导入屏幕？

Question

我是新来的react-native/expo，我目前正在尝试测试我的代码并确保我设置react-navigation正确。当我尝试在我的智能手机上运行 expo 时，我得到了这个：

无法从“C:\Users[username]\Desktop\JDA\Smartbox\screens\HomeScreen.js”解析模块“./screens/RegistrationScreen”：无法从“C:”中找到模块“./screens/RegistrationScreen”： \Users[用户名]\Desktop\JDA\Smartbox\screens\HomeScreen.js'。事实上，这些文件都不存在......

我不确定我是否写错了目录，但我似乎无法找到许多其他发生这种情况的情况并找到合适的解决方案。

import React from 'react';
import {
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  StatusBar,
  Text,
  Button,
  TouchableOpacity,
  View,
} from 'react-native';
import { WebBrowser } from 'expo';

import { MonoText } from '../components/StyledText';

import {createStackNavigator} from 'react-navigation';

import RegistrationScreen from './screens/RegistrationScreen';

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  onPress = () => {
    this.props.navigation.navigate('Home')
  };

  render() {
    return (
      <View style={{flex: 1}}>
      <View style={[{flex: 1}, styles.container]}>
      <Text style={styles.getStartedText}>Manage my locks</Text>
      </View>
      <View style={{flex: 2}}/>
      <Button style={{flex: 1}}title="Registration Test" onPress={this.onPress}>
      </Button>
      <Button style={{flex: 1}} title="Add new lock">
      </Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    ...Platform.select({
      android: {
        marginTop: StatusBar.currentHeight + 15
      }
    })
  },
  developmentModeText: {
    marginBottom: 20,
    color: 'rgba(0,0,0,0.4)',
    fontSize: 14,
    lineHeight: 19,
    textAlign: 'center',
  },
  contentContainer: {
    paddingTop: 30,
  }
});

createStackNavigator({
  Register: {
    screen: RegistrationScreen
  },
  Home: {
    screen: HomeScreen
  }
});

RegistrationScreen 的标头如下所示：

import React from 'react';
import {
    AppRegistry,
    Button,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View

} from 'react-native';

import {createStackNavigator} from 'react-navigation';

import HomeScreen from './screens/HomeScreen';

主屏幕和注册屏幕位于同一目录中。我只是为了测试而这样做，但我想确保一旦按下按钮，我就可以从这个屏幕导航到注册。

标签： javascriptandroidreact-nativeexpo

Answer 1

由于您的 HomeScreen 和 RegistrationScreen 位于同一目录中，因此您的 HomeScreen 导入应该是

import HomeScreen from './HomeScreen';

代替

import HomeScreen from './screens/HomeScreen';

和 RegistrationScreen 应该是

import RegistrationScreen from './RegistrationScreen';

代替

import RegistrationScreen from './screens/RegistrationScreen';