react-native - 如何正确导入 'NavigatorIOS'

Question

我在尝试加载我的 React-Native 应用程序时遇到错误。这似乎与 NavigatorIOS 未定义有关。当我尝试使用文本组件时，效果很好，那么问题是否与我使用 NavigatorIOS 的方式有关？

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment, Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  NavigatorIOS,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

class SearchPage extends Component<{}> {
  render() {
     return (<Text style={styles.description}>Search for houses to buy! (Again)</Text>);
   }
};
console.log(NavigatorIOS)
export default class App extends Component<{}> {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          component: SearchPage,
          title: 'My Initial Scene',
        }}
        style={{flex: 1}}
      />
    );
  }
}

const styles = StyleSheet.create({
  description: {
    fontSize: 18,
    textAlign: 'center',
    color: '#656565',
    marginTop: 65,
  },
  container: {
    flex: 1,
  },
});

我收到如下错误:

不变违规:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义。您可能忘记从定义它的文件中导出您的组件，或者您可能混淆了默认导入和命名导入。

检查App的render方法。

Answer 1

NavigatorIOS 自 0.6 起已弃用。
在
http://facebook.github.io/react-native/docs/navigation.html 了解替代导航解决方案
示例 react 导航:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
'use strict';
import React,{Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Button,
  Text,
  StatusBar,
} from 'react-native';


import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

class HomePage extends Component<{}> {
  render() {
 return <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button title="Go to SecondPage" onPress={() => this.props.navigation.push('SecondPage')}/>
  </View>
   }
};

class SecondPage extends Component<{}> {
  render() {
return  <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Second Page</Text>
<Button title = "Go to Third Page" onPress={() => this.props.navigation.navigate('ThirdPage')}> </Button>
</View>
  }
};

class ThirdPage extends Component<{}> {
  render() {
return  <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text style={styles.description}>Third Page</Text>
<Button title = "Go to Home Page" onPress={() => this.props.navigation.navigate('Home')}> </Button>
</View>
   }
};

const AppNavigator = createStackNavigator(
  {
Home : HomePage,
SecondPage : SecondPage,
ThirdPage : ThirdPage,
  },
  {
initialRouteName: 'Home',
  }
);

const Appcontainer =  createAppContainer(AppNavigator);

export default class App extends Component<{}> {
  render() {
return <Appcontainer />;
  }
}

const styles = StyleSheet.create({
  description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
  },
  container: {
  flex: 1,
},
});