React Native：反应导航问题

Question

谁能告诉我我做错了什么？

我是 React Native 的新手，我正在按照此处的 React Navigator 示例进行操作。

该应用程序是通过 Expo IDE 开发的。

https://reactnavigation.org/docs/intro/quick-start

这是我 App.js

的 src 代码

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { RootNavigator } from './src/RootNavigator';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <RootNavigator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是我 RootNavigator.js

的 src 代码

import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
  </View>
);

const DetailsScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Details Screen</Text>
  </View>
);

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerTitle: 'Home',
    },
  },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      headerTitle: 'Details',
    },
  },
});

export default RootNavigator;

Rootnavigator.js 位于 src 文件夹内（附上截图）

我在 iphone 中尝试运行时遇到此错误。

Answer 1

您正在执行 export default App 这是一个未命名的导出，因此您需要更改：

import { RootNavigator } from './src/RootNavigator';

到

import RootNavigator from './src/RootNavigator';

有关 es6 import/export 的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

React Native：反应导航问题

React Native : React Navigation Issue

reactjs

react-native

react-native-navigation

expo