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的渲染方法。

Answer 1

从

NavigatorIOS 开始不推荐使用。
在
http://facebook.github.io/react-native/docs/navigation.html
了解有关替代导航解决方案的信息示例反应导航：

/**
 * 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,
},
});

如何正确导入“ NavigatorIOS”

1 个答案: